IndexedDB 类构造函数属性值为空

zte4gxcn 于 2022-12-09 发布在 IndexedDB

关注(0)|答案(1)|浏览(199)

我第一次尝试使用indexedDB，并想为它创建一个类。我的代码可以打开数据库并将对象保存到其中，但当我尝试检索对象时，它为空

var libraries = new storedLibraries();
libraries.openDb();

user action

libraries.saveLibrary(template);

上课。

class storedLibraries {
    constructor() {
        this.DB_NAME = 'recording-template';
        this.DB_VERSION = 1;
        this.DB_STORE_NAME = 'library';
        this.db = null;
        this.result = null;
        
        if (!('indexedDB' in window)) {
            console.log('This browser doesn\'t support IndexedDB');
            return;
        }
    }
    
    openDb() {
        var request = indexedDB.open(this.DB_NAME, this.DB_VERSION);
        
        var _self = this;
        request.onsuccess = function (evt) {
            _self.db = this.result;
            _self.getObjectStore();
            console.log(_self.result);
            console.log("openDb DONE");
        };
        request.onerror = function (evt) {
            console.error("openDb:", evt.target.errorCode);
        };

        request.onupgradeneeded = function (evt) {
            console.log("openDb.onupgradeneeded");
            var store = evt.currentTarget.result.createObjectStore(_self.DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
        };
    }
    
    saveLibrary(template) {
        var transaction = this.db.transaction(["library"], "readwrite");
        
        // Do something when all the data is added to the database.
        var _self = this;
        transaction.oncomplete = function(event) {
            console.log("All done!");
        };

        transaction.onerror = function(event) {
            // Don't forget to handle errors!
        };

        var objectStore = transaction.objectStore("library");
        var request = objectStore.add(template);
        request.onsuccess = function(event) {
            // event.target.result
        };
    }
    
    getObjectStore() {
        //console.log(this);
        var transaction = this.db.transaction(["library"], "readwrite");
        var objectStore = transaction.objectStore("library");
        var request = objectStore.getAll();
        
        var _self = this;
        request.onerror = function(event) {
            // Handle errors!
        };
        request.onsuccess = function(event) {
            // Do something with the request.result!
            _self.result = request.result;
            console.log(_self.result);
        };
    }
}

getObjectStore（）中的console.log(_self.result);输出了正确的值，但在openDb（）中它是空的。我尝试了许多不同的方法，但我显然不明白什么？

indexeddb

来源：https://stackoverflow.com/questions/65809115/class-constructor-property-value-is-null

1条答案

按热度按时间

ao218c7q1#

我用承诺让它起作用了。

const libraries = new storedLibraries();
libraries.loadLibraries();

上课。

class storedLibraries {
    constructor() {
        this.DB_NAME = 'recording-template';
        this.DB_VERSION = 1;
        this.DB_STORE_NAME = 'library';
        this.db = null;
        this.libraries = [];

        if (!('indexedDB' in window)) {
            console.log('This browser doesn\'t support IndexedDB');
            return;
        }
    }
    
    loadLibraries() {
        this.openDb().then((result) => {
            this.getObjectStore().then((result) => {
                for(const res of result) {
                    this.libraries.push(new recordingsTemplate(res));
                }
            });
        }).catch(console.error);
    }

    async openDb() {
        var _self = this;
        const prom = new Promise((resolve, reject) => {
            var request = indexedDB.open(_self.DB_NAME, _self.DB_VERSION);
            
            request.onsuccess = (event) => {
                console.log("openDb:");
                _self.db = request.result;
                resolve(request.result);
            }
            request.onerror = (event) => {
                console.error("openDb:", event.target.errorCode);
                reject(evt);
            }
            
            request.onupgradeneeded = (event) => {
                console.log("openDb.onupgradeneeded");
                _self.db = request.result;
                var store = event.currentTarget.result.createObjectStore(_self.DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
                var transaction = event.target.transaction;
                
                transaction.oncomplete = (event) => {
                    resolve(store);
                }
            }
        });
        return prom;
    }
    
    async getObjectStore() {
        var _self = this;
        const prom = new Promise((resolve, reject) => {
            var transaction = _self.db.transaction(["library"], "readwrite");
            var objectStore = transaction.objectStore("library");
            var request = objectStore.getAll();
            
            request.onerror = (event) => {
                // Handle errors!
                reject(event);
            };
            request.onsuccess = (event) => {
                resolve(request.result);
            };
        });
        return prom;
    }
    
    async saveLibrary(template) {
        var _self = this;
        const prom = new Promise((resolve, reject) => {
            var transaction = _self.db.transaction(["library"], "readwrite");
            
            // Do something when all the data is added to the database.
            transaction.oncomplete = function(event) {
                console.log("All done!");
            };

            transaction.onerror = function(event) {
                // Don't forget to handle errors!
            };

            var objectStore = transaction.objectStore("library");
            var request = objectStore.add(template);
            request.onsuccess = function(event) {
                // event.target.result
            };
        });
        return prom;
    }
}

赞(0）回复(0）举报 2022-12-09

我来回答

IndexedDB 类构造函数属性值为空

1条答案

相关问题

热门标签

最新问答