IndexedDB 瀏覽器資料庫,是一個非關係型資料庫,數據形式使用的是json,IndexedDB適合存儲大量數據,它的API是非同步調用的,當然他的api 也相對複雜。 當然瀏覽器數據存儲 還有LocalStorage,Cookies,web SQL等 為什麼還再來一個indexedDB。 之前我 ...
IndexedDB 瀏覽器資料庫,是一個非關係型資料庫,數據形式使用的是json,IndexedDB適合存儲大量數據,它的API是非同步調用的,當然他的api 也相對複雜。
當然瀏覽器數據存儲 還有LocalStorage,Cookies,web SQL等 為什麼還再來一個indexedDB。
之前我在開發過程中使用的是web sql,可以直接寫sql查詢數據。
LocalStorage,用key-value鍵值模式存儲數據,而且Localstorage就是專門為小數量數據設計的。
Cookies只能是字元串 而且空間有限。
如果你在實際應用中希望存儲大量數據時,IndexedDB會明顯的更適合,IndexedDB也能提供你更為複雜的查詢數據的方式,還能建立索引,他的索引還是挺666的。
下麵是自己看了阮一峰的 文章 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
簡單的學習了下 IndexedDB 對這個瀏覽器資料庫有個大概的瞭解,下麵是個人對IndexedDB 簡單的封裝。
const dbName = "test"; const dbVersion = 1; export default { // indexedDB相容 indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || window.mozIndexedDB, //name:表名 key:主鍵 ,cursorIndex 索引 store: { teacher: { name: "teacher", key: "id", cursorIndex: [{ name: "teachNum", unique: false }] }, student: { name: "student", key: "id", cursorIndex: [{ name: "stuNum", unique: false }] } }, async initDB() { let that = this; let request = this.indexedDB.open(dbName, dbVersion); request.onerror = function() { console.log("打開資料庫失敗"); }; request.onsuccess = function() { console.log("打開資料庫成功"); }; request.onupgradeneeded = function(event) { let db = event.target.result; for (var t in that.store) { if (!db.objectStoreNames.contains(that.store[t].name)) { var objectStore = db.createObjectStore(that.store[t].name, { keyPath: that.store[t].key, autoIncrement: true }); for (let i = 0; i < that.store[t].cursorIndex.length; i++) { const element = that.store[t].cursorIndex[i]; objectStore.createIndex(element.name, element.name, { unique: element.unique }); } } } }; }, // 打開資料庫 openDB: function() { return new Promise((resolve, reject) => { let request = this.indexedDB.open(dbName, dbVersion); request.onerror = function(event) { reject("IndexedDB資料庫打開錯誤," + event); }; request.onsuccess = function(event) { resolve(event.target.result); }; }); }, // 刪除表 deleteDB: function(table) { let deleteQuest = this.indexedDB.deleteDatabase(table); deleteQuest.onerror = function() { return Promise.resolve(false); }; deleteQuest.onsuccess = function() { return Promise.resolve(true); }; }, // 關閉資料庫 closeDB: async function(db) { try { let d; if (!db) { d = await this.openDB(); } let closeQuest = d.closeDB(); return new Promise(resolve => { closeQuest.onerror = function() { resolve(false); }; closeQuest.onsuccess = function() { resolve(true); }; }); } catch (error) { return Promise.resolve(false); } }, // 添加數據,add添加新值 insert: async function(table, data) { try { let db = await this.openDB(); let request = db .transaction(table.name, "readwrite") .objectStore(table.name) .add(data); return new Promise((resolve, reject) => { request.onerror = function() { reject("添加數據出錯"); }; request.onsuccess = function() { resolve(true); }; }); } catch (error) { console.log(error); return Promise.resolve(false); } }, // 更新 update: async function(table, data) { try { let db = await this.openDB(); let request = db .transaction(table.name, "readwrite") .objectStore(table.name) .put(data); return new Promise(resolve => { request.onerror = function() { resolve(false); }; request.onsuccess = function() { resolve(true); }; }); } catch (error) { return Promise.resolve(false); } }, // 刪除數據 delete: async function(table, keyValue) { try { let db = await this.openDB(); let request = db .transaction(table.name, "readwrite") .objectStore(table.name) .delete(keyValue); return new Promise(resolve => { request.onerror = function() { resolve(false); }; request.onsuccess = function() { resolve(true); }; }); } catch (error) { return Promise.resolve(false); } }, // 清空數據 clear: async function(table) { let db = await this.openDB(); let store = db.transaction(table.name, "readwrite").objectStore(table.name); store.clear(); }, // 查詢數據 表名 索引值 索引 key 沒有value key為key 而不是索引 get: async function(table, keyValue, indexCursor) { try { let db = await this.openDB(); let store = db .transaction(table.name, "readonly") .objectStore(table.name); let request; request = !keyValue ? store.openCursor() : indexCursor ? store.index(indexCursor).get(keyValue) : store.get(keyValue); let data = []; return new Promise(resolve => { request.onerror = function() { resolve("查詢數據失敗"); }; request.onsuccess = function(event) { if (!keyValue && !indexCursor) { if (event.target.result) { data.push(event.target.result.value); event.target.result.continue(); } else { resolve(data); } } else { resolve([event.target.result]); } }; }); } catch (error) { return Promise.reject(error); } }, // 通過游標操作數據, callback中要有游標移動方式 handleDataByCursor: async function(table, keyRange) { try { let kRange = keyRange || ""; let db = await this.openDB(); let store = db.transaction(table, "readwrite").objectStore(table), request; request = store.openCursor(kRange); return new Promise(resolve => { request.onerror = function() { resolve("通過游標獲取數據報錯"); }; request.onsuccess = function(event) { let cursor = event.target.result; resolve(cursor); }; }); } catch (error) { return Promise.reject(error); } }, // 通過索引游標操作數據, callback中要有游標移動方式 handleDataByIndex: async function(table, keyRange, sursorIndex) { try { let kRange = keyRange || ""; let db = await this.openDB(); let store = db.transaction(table, "readwrite").objectStore(table), request; request = store.index(sursorIndex).openCursor(kRange); return new Promise(resolve => { request.onerror = function() { resolve("通過索引游標獲取數據報錯"); }; request.onsuccess = function(event) { let cursor = event.target.result; if (cursor) { resolve(cursor); } }; }); } catch (error) { return Promise.reject(error); } }, // 創建游標索引 createCursorIndex: async function(table, cursorIndex, unique) { var db = await this.openDB(); let store = db.transaction(table, "readwrite").objectStore(table); store.createIndex(cursorIndex, cursorIndex, { unique: unique }); return Promise.resolve(); } };
此隨筆乃本人學習工作記錄,如有疑問歡迎在下麵評論,轉載請標明出處。
如果對您有幫助請動動滑鼠右下方給我來個贊,您的支持是我最大的動力。