JS打開IndexedDB數據庫並封裝成Promise

直接上代碼

/**
 * JS打開IndexedDB數據庫封裝成Promise
 * @function
 * @param dbName {string}
 * @param dbVersion {number} 整數
 * @param objectStoreList {{objectStoreName:string,objectStoreOptions:{keyPath:string|undefined,autoIncrement:boolean|undefined},indexList:{indexName:string,keyPath:string,options:{unique:boolean,multiEntry:boolean}|undefined}[]|undefined}[]} 存儲對象結構
 * @return {Promise<IDBDatabase>} 參數是db對象
 */
const openDb = (dbName,dbVersion,objectStoreList)=>{
    return new Promise((resolve,reject)=>{
        const request = indexedDB.open(dbName,dbVersion);
        request.onerror = (event) => {
            console.error("打開數據庫失敗！",event)
            reject?.(event)
        };
        let upgradeneededPromise ;
        request.onupgradeneeded = (event) => {
            if(!objectStoreList||objectStoreList.length===0)return;
            const db = event.target.result;
            upgradeneededPromise = new Promise(res4up=>{
                let notOkCount = objectStoreList.length
                for (const osObj of objectStoreList) {
                    const os = db.createObjectStore(osObj.objectStoreName,osObj.objectStoreOptions);
                    if(osObj.indexList){
                        for(const idx of osObj.indexList){
                            os.createIndex(idx.indexName,idx.keyPath,idx.options)
                        }
                    }
                    os.transaction.oncomplete=()=>--notOkCount<=0&&res4up(db)
                }
            })
        };
        request.onsuccess=event=>upgradeneededPromise?upgradeneededPromise.then(db=>resolve(db)):resolve(event.target.result)
    });
}

/**
 * 獲取指定objectStore存儲的值
 * @function
 * @param db {object} 數據庫實例
 * @param objectStoreName {string}
 * @param keyPath {string}
 */
const getKeyValFromDb = (db,objectStoreName,keyPath)=>new Promise(r=>db.transaction(objectStoreName).objectStore(objectStoreName).get(keyPath).onsuccess=e=>r(e.target.result))

/**
 * 指定objectStore存儲值
 * @function
 * @param db {object} 數據庫實例
 * @param objectStoreName {string}
 * @param value {object} 對象必須含有keyPath屬性
 */
const setKeyValIntoDb = (db,objectStoreName,value) => new Promise(r=>db.transaction(objectStoreName,'readwrite').objectStore(objectStoreName).put(value).onsuccess=e=>r(e.target.result))

測試代碼

//注意：通常在indexDb中一次事件循環就自動完成一次事務，事務結束後繼續操作該事務對象時會報錯
openDb('TP',1,[
    {objectStoreName:'dict',objectStoreOptions:{keyPath:'dictCode'}}
]).then((db,osMap)=>{
    window.db=db;
    window.osMap=osMap
    console.log(db,osMap)
}).then(()=>{
    //常規callback操作
    let oss = window.db.transaction('dict','readwrite').objectStore('dict');
    oss.put({dictCode:'1',val:'123'}).onsuccess=e=>console.log('123',e.target.result)
    oss.put({dictCode:'1',val:'1234'}).onsuccess=e=>console.log('1234',e.target.result)
    oss.put({dictCode:'2',val:'21234'}).onsuccess=e=>console.log('1234',e.target.result)
    oss.get('1').onsuccess=e=>console.log('1',e.target.result)
    oss.get('2').onsuccess=e=>console.log('2',e.target.result)
    oss.get('3').onsuccess=e=>console.log('3',e.target.result)
    //通過Promise設置並獲取值
    setKeyValIntoDb(window.db,'dict',{dictCode:'3',val:'33331234'}).then(r=>console.log('set '+r))
		.then(()=>getKeyValFromDb(window.db,'dict','3')).then(r=>console.log('get 3',r))
})