ES6(四）用Promise封裝一下IndexedDB
阿新 • • 發佈：2021-02-04
# indexedDB
IndexedDB 是一種底層 API，用於在客戶端儲存大量的結構化資料，它可以被網頁尾本建立和操作。
IndexedDB 允許儲存大量資料，提供查詢介面，還能建立索引，這些都是 LocalStorage 所不具備的。
就資料庫型別而言，IndexedDB 不屬於關係型資料庫（不支援 SQL 查詢語句），更接近 NoSQL 資料庫。
其他的介紹就不搬運了，大家可以自行百度，後面有參考資料。
# 需求
我想更好的實現文件驅動的想法，發現需要實現前端儲存的功能，於是打算採用 IndexedDB 來實現前端儲存的功能。但是看了一下其操作方式比較繁瑣，所以打算封裝一下。
官網給了幾個第三方的封裝庫，我也點過去看了看，結果沒看懂。想了想還是自己動手豐衣足食吧。
關於重複製造輪子的想法：
* 首先要有製造輪子能能力。
* 自己造的輪子，操控性更好。
# 功能設計
按照官網的功能介紹，把功能整理了一下：
如圖：
就是建庫、增刪改查那一套。看到有些第三方的封裝庫，可以實現支援sql語句方式的查詢，真的很厲害。目前沒有這種需求，好吧，能力有限實現不了。
總之，先滿足自己的需求，以後在慢慢改進。
# 程式碼實現
還是簡單粗暴，直接上程式碼吧，基礎知識的介紹，網上有很多了，可以看後面的參考資料。官網介紹的也比較詳細，還有中文版的。
## 配置檔案
nf-indexedDB.config
```js
const config = {
dbName: 'dbTest',
ver: 1,
debug: true,
objectStores: [ // 建庫依據
{
objectStoreName: 'blog',
index: [ // 索引 ， unique 是否可以重複
{ name: 'groupId', unique: false }
]
}
],
objects: { // 初始化資料
blog: [
{
id: 1,
groupId: 1,
title: '這是一個部落格',
addTime: '2020-10-15',
introduction: '這是部落格簡介',
concent: '這是部落格的詳細內容
第二行', viewCount: 1, agreeCount: 1 }, { id: 2, groupId: 2, title: '這是兩個部落格', addTime: '2020-10-15', introduction: '這是部落格簡介', concent: '這是部落格的詳細內容
第二行', viewCount: 10, agreeCount: 10 } ] } } export default config ``` * dbName 指定資料庫名稱 * ver 指定資料庫版本 * debug 指定是否要列印狀態 * objectStores 物件倉庫的描述，庫名、索引等。 * objects 初始化資料，如果建庫後需要新增預設資料的話，可以在這裡設定。 這裡的設定不太完善，有些小問題現在還沒想好解決方法。以後想好了再改。 ## 內部成員 ```js /** * IndexedDB 資料庫物件 * 判斷瀏覽器是否支援 * */ const myIndexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB if (!myIndexedDB) { console.log('你的瀏覽器不支援IndexedDB') } let _db // 內部儲存的 indexed 資料庫 的例項 /** * 把vue的ref、reactive轉換成原始物件 */ const _vueToObject = (vueObject) => { let _object = vueObject // 針對Vue3做的型別判斷 if (Vue.isRef(_object)) { // 如果是 vue 的 ref 型別，替換成 ref.value _object = _object.value } if (Vue.isReactive(_object)) { // 如果是 vue 的 reactive 型別，那麼獲取原型，否則會報錯 _object = Vue.toRaw(_object) } return _object } ``` * myIndexedDB 相容瀏覽器的寫法，適應不同的瀏覽器。 * _db 內部的 IDBOpenDBRequest 用於檢查是否開啟資料庫，以及資料庫的相關操作。 * _vueToObject 這是一個相容Vue的物件轉換函式。vue的reactive直接存入的話會報錯，需要獲取原型才能存入，我又不想每次儲存的時候都多一步操作，所以就寫了這個轉換函式。 如果非vue3環境，可以直接返回引數，不影響其他功能。 ## 建立物件庫以及開啟資料庫 ```js // ======== 資料庫操作 ================ /** * 開啟 indexedDB 資料庫。 * dbName：資料庫名稱； * version：資料庫版本。 * 可以不傳值。 */ const dbOpen = (dbName, version) => { // 建立資料庫，並且開啟 const name = config.dbName || dbName const ver = config.ver || version const dbRequest = myIndexedDB.open(name, ver) // 記錄資料庫版本是否變更 let isChange = false /* 該域中的資料庫myIndex */ if (config.debug) { console.log('dbRequest - 開啟indexedDb資料庫：', dbRequest) } // 開啟資料庫的 promise const dbPromise = new Promise((resolve, reject) => { // 資料庫開啟成功的回撥 dbRequest.onsuccess = (event) => { // _db = event.target.result // 資料庫成功開啟後，記錄資料庫物件 _db = dbRequest.result if (isChange) { // 如果變更，則設定初始資料 setup().then(() => { resolve(_db) }) } else { resolve(_db) } } dbRequest.onerror = (event) => { reject(event) // 返回引數 } }) // 建立表 // 第一次開啟成功後或者版本有變化自動執行以下事件，一般用於初始化資料庫。 dbRequest.onupgradeneeded = (event) => { isChange = true _db = event.target.result /* 資料庫物件 */ // 建立物件表 for (let i = 0; i < config.objectStores.length; i++) { const object = config.objectStores[i] // 驗證有沒有，沒有的話建立一個物件表 if (!_db.objectStoreNames.contains(object.objectStoreName)) { const objectStore = _db.createObjectStore(object.objectStoreName, { keyPath: 'id' }) /* 建立person倉庫(表) 主鍵 */ // objectStore = _db.createObjectStore('person',{autoIncrement:true});/*自動建立主鍵*/ // 建立索引 for (let i = 0; i < object.index.length; i++) { const index = object.index[i] objectStore.createIndex(index.name, index.name, { unique: index.unique }) } if (config.debug) { console.log('onupgradeneeded - 建立了一個新的物件倉庫：', objectStore) } } } } // 返回 Promise 例項 —— 開啟Indexed庫 return dbPromise } ``` 這段程式碼有點長，因為有兩個功能，一個是開啟資料庫，一個是建立資料庫。 indexedDB 的邏輯是這樣的，在open資料庫的時候判斷本地有沒有資料庫，如果沒有資料庫則觸發 onupgradeneeded 事件，建立資料庫，然後開啟資料庫。 如果有資料庫的話，判斷版本號，如果高於本地資料庫，那麼也會觸發 onupgradeneeded 事件。所以open和 onupgradeneeded 就聯絡在了一起。 ## 初始化物件 ```js /** * 設定初始資料 */ const setup = () =>
第二行', viewCount: 1, agreeCount: 1 }) }) ``` 就是說，每次操作的時候先開庫，然後才能進行操作，但是想想這麼做是不是有點麻煩？ 能不能不管開不開庫的，直接開魯呢？ 於是內部實現程式碼就變得複雜了一點。 ## 修改物件 ```js /** * 修改物件。 * storeName：物件倉庫名； * object：要修改的物件 */ const updateObject = (storeName, object) => { const _object = _vueToObject(object) // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _updateObject = () => { const tranRequest = _db.transaction(storeName, 'readwrite') // 按照id獲取物件 tranRequest .objectStore(storeName) // 獲取store .get(_object.id) // 獲取物件 .onsuccess = (event) => { // 成功後的回撥 // 從倉庫裡提取物件，把修改值合併到物件裡面。 const newObject = { ...event.target.result, ..._object } // 修改資料 tranRequest .objectStore(storeName) // 獲取store .put(newObject) // 修改物件 .onsuccess = (event) => { // 成功後的回撥 if (config.debug) { console.log('updateObject -- onsuccess- event:', event) } resolve(event.target.result) } } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _updateObject() }) } else { _updateObject() } }) return objectPromise } ``` 修改物件，是新的物件覆蓋掉原來的物件，一開始是想直接put，但是後來實踐的時候發現，可能修改的時候只是修改其中的一部分屬性，而不是全部屬性，那麼直接覆蓋的話，豈不是造成引數不全的事情了嗎？ 於是只好先把物件拿出來，然後和新物件合併一下，然後再put回去，於是程式碼就又變得這麼長了。 ## 刪除物件 ```js /** * 依據id刪除物件。 * storeName：物件倉庫名； * id：要刪除的物件的key值，注意型別要準確。 */ const deleteObject = (storeName, id) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _deleteObject = () => { const tranRequest = _db.transaction(storeName, 'readwrite') tranRequest .objectStore(storeName) // 獲取store .delete(id) // 刪除一個物件 .onsuccess = (event) => { // 成功後的回撥 resolve(event.target.result) } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _deleteObject() }) } else { _deleteObject() } }) return objectPromise } ``` 其實吧刪除物件，一個 delete 就可以了，但是還是要先判斷一下是否開啟資料庫，於是程式碼還是短不了。 ## 清空倉庫裡的物件 ```js /** * 清空store裡的所有物件。 * storeName：物件倉庫名； */ const clearStore = (storeName) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _clearStore = () => { const tranRequest = _db.transaction(storeName, 'readwrite') tranRequest .objectStore(storeName) // 獲取store .clear() // 清空物件倉庫裡的物件 .onsuccess = (event) => { // 成功後的回撥 resolve(event) } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _clearStore() }) } else { _clearStore() } }) return objectPromise } ``` * clear() 清空指定物件倉庫裡的所有物件，請謹慎操作。 ## 刪除物件倉庫 ```js /** * 刪除整個store。 * storeName：物件倉庫名； */ const deleteStore = (storeName) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _deleteStore = () => { const tranRequest = _db.transaction(storeName, 'readwrite') tranRequest .objectStore(storeName) // 獲取store .delete() // 清空物件倉庫裡的物件 .onsuccess = (event) => { // 成功後的回撥 resolve(event) } tranRequest.onerror = (event) => { reject(event) // 失敗後的回撥 } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _deleteStore() }) } else { _deleteStore() } }) return objectPromise } ``` 這個就更厲害了，可以把物件倉庫給刪掉。更要謹慎。 ## 刪除資料庫 ```js /** * 刪除資料庫。 * dbName：資料庫名； */ const deleteDB = (dbName) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 刪掉整個資料庫 myIndexedDB.deleteDatabase(dbName).onsuccess = (event) => { resolve(event) } }) return objectPromise } ``` 能建立資料庫，那麼就應該能刪除資料庫，這個就是。 這個就非常簡單了，不用判斷是否開啟資料庫，直接刪除就好。 不過前端資料庫應該具備這樣的功能：整個庫刪掉後，可以自動恢復狀態才行。 ## 按主鍵獲取物件，或者獲取全部 ```js /** * 獲取物件。 * storeName：物件倉庫名； * id：要獲取的物件的key值，注意型別要準確，只能取一個。 * 如果不設定id，會返回store裡的全部物件 */ const getObject = (storeName, id) => { const objectPromise = new Promise((resolve, reject) => { const _getObject = () => { const tranRequest = _db.transaction(storeName, 'readonly') const store = tranRequest.objectStore(storeName) // 獲取store let dbRequest // 判斷是獲取一個，還是獲取全部 if (typeof id === 'undefined') { dbRequest = store.getAll() } else { dbRequest = store.get(id) } dbRequest.onsuccess = (event) => { // 成功後的回撥 if (config.debug) { console.log('getObject -- onsuccess- event:', id, event) } resolve(event.target.result) // 返回物件 } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _getObject() }) } else { _getObject() } }) return objectPromise } ``` 這裡有兩個功能 * 依據ID獲取對應的物件 * 獲取物件倉庫裡的所有物件 不想取兩個函式名，於是就依據引數來區分了，傳遞ID就獲取ID的物件，沒有傳遞ID就返回全部。 ## 查詢物件倉庫 ```js /** * 依據 索引+遊標，獲取物件，可以獲取多條。 * storeName：物件倉庫名。 * page：{ * start:開始, * count:數量, * description:'next' * // next 升序 * // prev 降序 * // nextunique 升序，只取一 * // prevunique 降序，只取一 * } * findInfo = { * indexName: 'groupId', * indexKind: '=', // '>','>=','<','<=','between', * indexValue: 1, * betweenInfo: { * v1:1, * v2:2, * v1isClose:true, * v2isClose:true, * }, * where：(object) => { * reutrn true/false * } * } */ const findObject = (storeName, findInfo = {}, page = {}) => { const _start = page.start || 0 const _count = page.count || 0 const _end = _start + _count const _description = page.description || 'prev' // 預設倒序 // 查詢條件，按照主鍵或者索引查詢 let keyRange = null if (typeof findInfo.indexName !== "undefined") { if (typeof findInfo.indexKind !== "undefined") { const id = findInfo.indexValue const dicRange = { "=":IDBKeyRange.only(id), ">":IDBKeyRange.lowerBound(id, true), ">=":IDBKeyRange.lowerBound(id), "<":IDBKeyRange.upperBound(id, true), "<=":IDBKeyRange.upperBound(id) } switch (findInfo.indexKind) { case '=': case '>': case '>=': case '<': case '<=': keyRange = dicRange[findInfo.indexKind] break case 'between': const betweenInfo = findInfo.betweenInfo keyRange = IDBKeyRange.bound(betweenInfo.v1,betweenInfo.v2,betweenInfo.v1isClose,betweenInfo.v2isClose) break } } } console.log('findObject - keyRange', keyRange) const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _findObjectByIndex = () => { const dataList = [] let cursorIndex = 0 const tranRequest = _db.transaction(storeName, 'readonly') const store = tranRequest.objectStore(storeName) let cursorRequest // 判斷是否索引查詢 if (typeof findInfo.indexName === "undefined") { cursorRequest = store.openCursor(keyRange, _description) } else { cursorRequest = store .index(findInfo.indexName) .openCursor(keyRange, _description) } cursorRequest.onsuccess = (event) => { const cursor = event.target.result if (cursor) { if (_end === 0 || (cursorIndex >= _start && cursorIndex < _end)) { // 判斷鉤子函式 if (typeof findInfo.where === 'function') { if (findInfo.where(cursor.value, cursorIndex)) { dataList.push(cursor.value) cursorIndex++ } } else { // 沒有設定查詢條件 dataList.push(cursor.value) cursorIndex++ } } cursor.continue() } // tranRequest.commit() } tranRequest.oncomplete = (event) =>
第二行', viewCount: 1, agreeCount: 1 }).then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 物件 第二個引數是要新增的物件，其屬性必須有主鍵和索引，其他隨意。 * 返回值 成功後會返回物件ID 點右鍵可以重新整理資料，如圖：  更新後的資料，如圖：  ## 修改物件 ```js updateObject('blog',blog).then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 物件 第二個引數是要修改的物件，屬性可以不全。 * 返回值 成功後會返回物件ID ## 刪除物件 ```js deleteObject('blog',id).then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 物件 第二個引數是要刪除的物件的ID。 * 返回值 成功後會返回物件ID ## 清空倉庫裡的物件 ```js clearStore('blog').then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 返回值 成功後會返回物件ID ## 刪除物件倉庫 ```js deleteStore('blog').then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 返回值 成功後會返回物件ID ## 刪除資料庫 ```js deleteDB('dbTest').then((data) => { re.value = data getAll() }) ``` * 資料庫名稱 第一個引數是資料庫的名稱 ## 查詢功能 ```js // 查詢條件 const findInfo = { indexName: 'groupId', indexKind: '=', // '>','>=','<','<=','between', indexValue: 1, betweenInfo: { v1:1, v2:2, v1isClose:true, v2isClose:true, }, where: (object) => { if (findKey.value == '') return true let re = false if (object.title.indexOf(findKey.value) >= 0) { re = true } if (object.introduction.indexOf(findKey.value) >= 0) { re = true } if (object.concent.indexOf(findKey.value) >= 0) { re = true } return re } } const find = () => { findObject('blog', findInfo).then((data) => { findRe.value = data }) } ``` * findInfo 查詢資訊的物件，把需要查詢的資訊都放在這裡 * indexName 索引名稱，可以不設定。 * indexKind 索引屬性的查詢方式，如果設定indexName，則必須設定。 * indexValue 索引欄位的查詢值 * betweenInfo 如果 indexKind = 'between' 的話，需要設定。 * v1 開始值 * v2 結束值 * v1isClose 是否閉合區間 * v2isClose 是否閉合區間 * where 鉤子函式，可以不設定。 內部開啟遊標後，會把物件返回來，然後我們就可以在這裡進行各種條件判斷。 全部程式碼就不貼了，感興趣的話可以去GitHub看。 貼一個摺疊後的效果圖吧：  就是先把相關的功能和在一起，寫一個操作類，然後在setup裡面應用這個類就可以了，然後寫點程式碼把各個類關聯起來即可。 這樣程式碼好維護多了。 # 小結 功能不是很完善，目前是自己夠用的程度。 本來想用純js來寫個使用方式的，但是發現還是用vue寫著方便，於是測試程式碼就變成了vue的形式。 # 原始碼 https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/LocalStore/IndexedDB # 線上演示 https://naturefwvue.github.io/nf-vue-cnd/cnd/LocalStore/IndexedDB/ # 參考資料 官網：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API 阮一峰的網路日誌：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html 謙行： https://www.cnblogs.com/dolphinX/p/3416889.html
第二行', viewCount: 1, agreeCount: 1 }, { id: 2, groupId: 2, title: '這是兩個部落格', addTime: '2020-10-15', introduction: '這是部落格簡介', concent: '這是部落格的詳細內容
第二行', viewCount: 10, agreeCount: 10 } ] } } export default config ``` * dbName 指定資料庫名稱 * ver 指定資料庫版本 * debug 指定是否要列印狀態 * objectStores 物件倉庫的描述，庫名、索引等。 * objects 初始化資料，如果建庫後需要新增預設資料的話，可以在這裡設定。 這裡的設定不太完善，有些小問題現在還沒想好解決方法。以後想好了再改。 ## 內部成員 ```js /** * IndexedDB 資料庫物件 * 判斷瀏覽器是否支援 * */ const myIndexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB if (!myIndexedDB) { console.log('你的瀏覽器不支援IndexedDB') } let _db // 內部儲存的 indexed 資料庫 的例項 /** * 把vue的ref、reactive轉換成原始物件 */ const _vueToObject = (vueObject) => { let _object = vueObject // 針對Vue3做的型別判斷 if (Vue.isRef(_object)) { // 如果是 vue 的 ref 型別，替換成 ref.value _object = _object.value } if (Vue.isReactive(_object)) { // 如果是 vue 的 reactive 型別，那麼獲取原型，否則會報錯 _object = Vue.toRaw(_object) } return _object } ``` * myIndexedDB 相容瀏覽器的寫法，適應不同的瀏覽器。 * _db 內部的 IDBOpenDBRequest 用於檢查是否開啟資料庫，以及資料庫的相關操作。 * _vueToObject 這是一個相容Vue的物件轉換函式。vue的reactive直接存入的話會報錯，需要獲取原型才能存入，我又不想每次儲存的時候都多一步操作，所以就寫了這個轉換函式。 如果非vue3環境，可以直接返回引數，不影響其他功能。 ## 建立物件庫以及開啟資料庫 ```js // ======== 資料庫操作 ================ /** * 開啟 indexedDB 資料庫。 * dbName：資料庫名稱； * version：資料庫版本。 * 可以不傳值。 */ const dbOpen = (dbName, version) => { // 建立資料庫，並且開啟 const name = config.dbName || dbName const ver = config.ver || version const dbRequest = myIndexedDB.open(name, ver) // 記錄資料庫版本是否變更 let isChange = false /* 該域中的資料庫myIndex */ if (config.debug) { console.log('dbRequest - 開啟indexedDb資料庫：', dbRequest) } // 開啟資料庫的 promise const dbPromise = new Promise((resolve, reject) => { // 資料庫開啟成功的回撥 dbRequest.onsuccess = (event) => { // _db = event.target.result // 資料庫成功開啟後，記錄資料庫物件 _db = dbRequest.result if (isChange) { // 如果變更，則設定初始資料 setup().then(() => { resolve(_db) }) } else { resolve(_db) } } dbRequest.onerror = (event) => { reject(event) // 返回引數 } }) // 建立表 // 第一次開啟成功後或者版本有變化自動執行以下事件，一般用於初始化資料庫。 dbRequest.onupgradeneeded = (event) => { isChange = true _db = event.target.result /* 資料庫物件 */ // 建立物件表 for (let i = 0; i < config.objectStores.length; i++) { const object = config.objectStores[i] // 驗證有沒有，沒有的話建立一個物件表 if (!_db.objectStoreNames.contains(object.objectStoreName)) { const objectStore = _db.createObjectStore(object.objectStoreName, { keyPath: 'id' }) /* 建立person倉庫(表) 主鍵 */ // objectStore = _db.createObjectStore('person',{autoIncrement:true});/*自動建立主鍵*/ // 建立索引 for (let i = 0; i < object.index.length; i++) { const index = object.index[i] objectStore.createIndex(index.name, index.name, { unique: index.unique }) } if (config.debug) { console.log('onupgradeneeded - 建立了一個新的物件倉庫：', objectStore) } } } } // 返回 Promise 例項 —— 開啟Indexed庫 return dbPromise } ``` 這段程式碼有點長，因為有兩個功能，一個是開啟資料庫，一個是建立資料庫。 indexedDB 的邏輯是這樣的，在open資料庫的時候判斷本地有沒有資料庫，如果沒有資料庫則觸發 onupgradeneeded 事件，建立資料庫，然後開啟資料庫。 如果有資料庫的話，判斷版本號，如果高於本地資料庫，那麼也會觸發 onupgradeneeded 事件。所以open和 onupgradeneeded 就聯絡在了一起。 ## 初始化物件 ```js /** * 設定初始資料 */ const setup = () =>
第二行', viewCount: 1, agreeCount: 1 }) }) ``` 就是說，每次操作的時候先開庫，然後才能進行操作，但是想想這麼做是不是有點麻煩？ 能不能不管開不開庫的，直接開魯呢？ 於是內部實現程式碼就變得複雜了一點。 ## 修改物件 ```js /** * 修改物件。 * storeName：物件倉庫名； * object：要修改的物件 */ const updateObject = (storeName, object) => { const _object = _vueToObject(object) // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _updateObject = () => { const tranRequest = _db.transaction(storeName, 'readwrite') // 按照id獲取物件 tranRequest .objectStore(storeName) // 獲取store .get(_object.id) // 獲取物件 .onsuccess = (event) => { // 成功後的回撥 // 從倉庫裡提取物件，把修改值合併到物件裡面。 const newObject = { ...event.target.result, ..._object } // 修改資料 tranRequest .objectStore(storeName) // 獲取store .put(newObject) // 修改物件 .onsuccess = (event) => { // 成功後的回撥 if (config.debug) { console.log('updateObject -- onsuccess- event:', event) } resolve(event.target.result) } } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _updateObject() }) } else { _updateObject() } }) return objectPromise } ``` 修改物件，是新的物件覆蓋掉原來的物件，一開始是想直接put，但是後來實踐的時候發現，可能修改的時候只是修改其中的一部分屬性，而不是全部屬性，那麼直接覆蓋的話，豈不是造成引數不全的事情了嗎？ 於是只好先把物件拿出來，然後和新物件合併一下，然後再put回去，於是程式碼就又變得這麼長了。 ## 刪除物件 ```js /** * 依據id刪除物件。 * storeName：物件倉庫名； * id：要刪除的物件的key值，注意型別要準確。 */ const deleteObject = (storeName, id) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _deleteObject = () => { const tranRequest = _db.transaction(storeName, 'readwrite') tranRequest .objectStore(storeName) // 獲取store .delete(id) // 刪除一個物件 .onsuccess = (event) => { // 成功後的回撥 resolve(event.target.result) } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _deleteObject() }) } else { _deleteObject() } }) return objectPromise } ``` 其實吧刪除物件，一個 delete 就可以了，但是還是要先判斷一下是否開啟資料庫，於是程式碼還是短不了。 ## 清空倉庫裡的物件 ```js /** * 清空store裡的所有物件。 * storeName：物件倉庫名； */ const clearStore = (storeName) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _clearStore = () => { const tranRequest = _db.transaction(storeName, 'readwrite') tranRequest .objectStore(storeName) // 獲取store .clear() // 清空物件倉庫裡的物件 .onsuccess = (event) => { // 成功後的回撥 resolve(event) } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _clearStore() }) } else { _clearStore() } }) return objectPromise } ``` * clear() 清空指定物件倉庫裡的所有物件，請謹慎操作。 ## 刪除物件倉庫 ```js /** * 刪除整個store。 * storeName：物件倉庫名； */ const deleteStore = (storeName) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _deleteStore = () => { const tranRequest = _db.transaction(storeName, 'readwrite') tranRequest .objectStore(storeName) // 獲取store .delete() // 清空物件倉庫裡的物件 .onsuccess = (event) => { // 成功後的回撥 resolve(event) } tranRequest.onerror = (event) => { reject(event) // 失敗後的回撥 } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _deleteStore() }) } else { _deleteStore() } }) return objectPromise } ``` 這個就更厲害了，可以把物件倉庫給刪掉。更要謹慎。 ## 刪除資料庫 ```js /** * 刪除資料庫。 * dbName：資料庫名； */ const deleteDB = (dbName) => { // 定義一個 Promise 的例項 const objectPromise = new Promise((resolve, reject) => { // 刪掉整個資料庫 myIndexedDB.deleteDatabase(dbName).onsuccess = (event) => { resolve(event) } }) return objectPromise } ``` 能建立資料庫，那麼就應該能刪除資料庫，這個就是。 這個就非常簡單了，不用判斷是否開啟資料庫，直接刪除就好。 不過前端資料庫應該具備這樣的功能：整個庫刪掉後，可以自動恢復狀態才行。 ## 按主鍵獲取物件，或者獲取全部 ```js /** * 獲取物件。 * storeName：物件倉庫名； * id：要獲取的物件的key值，注意型別要準確，只能取一個。 * 如果不設定id，會返回store裡的全部物件 */ const getObject = (storeName, id) => { const objectPromise = new Promise((resolve, reject) => { const _getObject = () => { const tranRequest = _db.transaction(storeName, 'readonly') const store = tranRequest.objectStore(storeName) // 獲取store let dbRequest // 判斷是獲取一個，還是獲取全部 if (typeof id === 'undefined') { dbRequest = store.getAll() } else { dbRequest = store.get(id) } dbRequest.onsuccess = (event) => { // 成功後的回撥 if (config.debug) { console.log('getObject -- onsuccess- event:', id, event) } resolve(event.target.result) // 返回物件 } tranRequest.onerror = (event) => { reject(event) } } // 判斷資料庫是否開啟 if (typeof _db === 'undefined') { dbOpen().then(() => { _getObject() }) } else { _getObject() } }) return objectPromise } ``` 這裡有兩個功能 * 依據ID獲取對應的物件 * 獲取物件倉庫裡的所有物件 不想取兩個函式名，於是就依據引數來區分了，傳遞ID就獲取ID的物件，沒有傳遞ID就返回全部。 ## 查詢物件倉庫 ```js /** * 依據 索引+遊標，獲取物件，可以獲取多條。 * storeName：物件倉庫名。 * page：{ * start:開始, * count:數量, * description:'next' * // next 升序 * // prev 降序 * // nextunique 升序，只取一 * // prevunique 降序，只取一 * } * findInfo = { * indexName: 'groupId', * indexKind: '=', // '>','>=','<','<=','between', * indexValue: 1, * betweenInfo: { * v1:1, * v2:2, * v1isClose:true, * v2isClose:true, * }, * where：(object) => { * reutrn true/false * } * } */ const findObject = (storeName, findInfo = {}, page = {}) => { const _start = page.start || 0 const _count = page.count || 0 const _end = _start + _count const _description = page.description || 'prev' // 預設倒序 // 查詢條件，按照主鍵或者索引查詢 let keyRange = null if (typeof findInfo.indexName !== "undefined") { if (typeof findInfo.indexKind !== "undefined") { const id = findInfo.indexValue const dicRange = { "=":IDBKeyRange.only(id), ">":IDBKeyRange.lowerBound(id, true), ">=":IDBKeyRange.lowerBound(id), "<":IDBKeyRange.upperBound(id, true), "<=":IDBKeyRange.upperBound(id) } switch (findInfo.indexKind) { case '=': case '>': case '>=': case '<': case '<=': keyRange = dicRange[findInfo.indexKind] break case 'between': const betweenInfo = findInfo.betweenInfo keyRange = IDBKeyRange.bound(betweenInfo.v1,betweenInfo.v2,betweenInfo.v1isClose,betweenInfo.v2isClose) break } } } console.log('findObject - keyRange', keyRange) const objectPromise = new Promise((resolve, reject) => { // 定義個函式，便於呼叫 const _findObjectByIndex = () => { const dataList = [] let cursorIndex = 0 const tranRequest = _db.transaction(storeName, 'readonly') const store = tranRequest.objectStore(storeName) let cursorRequest // 判斷是否索引查詢 if (typeof findInfo.indexName === "undefined") { cursorRequest = store.openCursor(keyRange, _description) } else { cursorRequest = store .index(findInfo.indexName) .openCursor(keyRange, _description) } cursorRequest.onsuccess = (event) => { const cursor = event.target.result if (cursor) { if (_end === 0 || (cursorIndex >= _start && cursorIndex < _end)) { // 判斷鉤子函式 if (typeof findInfo.where === 'function') { if (findInfo.where(cursor.value, cursorIndex)) { dataList.push(cursor.value) cursorIndex++ } } else { // 沒有設定查詢條件 dataList.push(cursor.value) cursorIndex++ } } cursor.continue() } // tranRequest.commit() } tranRequest.oncomplete = (event) =>
第二行', viewCount: 1, agreeCount: 1 }).then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 物件 第二個引數是要新增的物件，其屬性必須有主鍵和索引，其他隨意。 * 返回值 成功後會返回物件ID 點右鍵可以重新整理資料，如圖：  更新後的資料，如圖：  ## 修改物件 ```js updateObject('blog',blog).then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 物件 第二個引數是要修改的物件，屬性可以不全。 * 返回值 成功後會返回物件ID ## 刪除物件 ```js deleteObject('blog',id).then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 物件 第二個引數是要刪除的物件的ID。 * 返回值 成功後會返回物件ID ## 清空倉庫裡的物件 ```js clearStore('blog').then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 返回值 成功後會返回物件ID ## 刪除物件倉庫 ```js deleteStore('blog').then((data) => { re.value = data getAll() }) ``` * 倉庫名 第一個引數是物件倉庫的名稱，目前暫時採用字串的形式。 * 返回值 成功後會返回物件ID ## 刪除資料庫 ```js deleteDB('dbTest').then((data) => { re.value = data getAll() }) ``` * 資料庫名稱 第一個引數是資料庫的名稱 ## 查詢功能 ```js // 查詢條件 const findInfo = { indexName: 'groupId', indexKind: '=', // '>','>=','<','<=','between', indexValue: 1, betweenInfo: { v1:1, v2:2, v1isClose:true, v2isClose:true, }, where: (object) => { if (findKey.value == '') return true let re = false if (object.title.indexOf(findKey.value) >= 0) { re = true } if (object.introduction.indexOf(findKey.value) >= 0) { re = true } if (object.concent.indexOf(findKey.value) >= 0) { re = true } return re } } const find = () => { findObject('blog', findInfo).then((data) => { findRe.value = data }) } ``` * findInfo 查詢資訊的物件，把需要查詢的資訊都放在這裡 * indexName 索引名稱，可以不設定。 * indexKind 索引屬性的查詢方式，如果設定indexName，則必須設定。 * indexValue 索引欄位的查詢值 * betweenInfo 如果 indexKind = 'between' 的話，需要設定。 * v1 開始值 * v2 結束值 * v1isClose 是否閉合區間 * v2isClose 是否閉合區間 * where 鉤子函式，可以不設定。 內部開啟遊標後，會把物件返回來，然後我們就可以在這裡進行各種條件判斷。 全部程式碼就不貼了，感興趣的話可以去GitHub看。 貼一個摺疊後的效果圖吧：  就是先把相關的功能和在一起，寫一個操作類，然後在setup裡面應用這個類就可以了，然後寫點程式碼把各個類關聯起來即可。 這樣程式碼好維護多了。 # 小結 功能不是很完善，目前是自己夠用的程度。 本來想用純js來寫個使用方式的，但是發現還是用vue寫著方便，於是測試程式碼就變成了vue的形式。 # 原始碼 https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/LocalStore/IndexedDB # 線上演示 https://naturefwvue.github.io/nf-vue-cnd/cnd/LocalStore/IndexedDB/ # 參考資料 官網：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API 阮一峰的網路日誌：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html 謙行： https://www.cnblogs.com/dolphinX/p/3416889.html