當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【indexedDB】indexedDB知识梳理

發布時間：2023/12/14 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了【indexedDB】indexedDB知识梳理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

indexedDB介紹
數據庫操作IDBFactory
- 增(連接)
- 刪
- 查
請求操作IDBRequest
- onsuccess
- onerror
- onupgradeneeded
- result
操作對象庫IDBObjectStore
- 什么是對象庫
- 增
- 刪
事務對象IDBTransaction
- transaction
- 增
- 刪
- 改
- 查
- 清除
- 條件查詢
- 條件查詢keyPath值
- 對象庫中數據的條數
對象庫遍歷IDBCursor
- 語法
- 按照對象庫的數據的keyPath進行遍歷
學習資料

indexedDB介紹

1）IndexedDB是瀏覽器提供的本地數據庫，具有以下特點：

鍵值對存儲
異步操作
支持事務。這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，

數據庫回滾到事務發生之前的狀態，不存在只改寫一部分數據的情況。

數據庫幾乎所有操作，都是通過事務來處理的。
受瀏覽器同源限制。每一個數據庫對應創建它的域名。

網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫。
儲存空間大。一般來說不少于 250MB，甚至沒有上限。
支持二進制儲存。 IndexedDB 不僅可以儲存字符串，還可以儲存二進制數據（ArrayBuffer 對象和 Blob 對象）。
幾乎所有操作都有成功和失敗的監聽。

2）它包含很多對象接口：

數據庫：IDBDatabase 對象
對象倉庫：IDBObjectStore 對象
操作請求：IDBRequest 對象
事務： IDBTransaction 對象
索引： IDBIndex 對象
指針： IDBCursor 對象

等。

更多接口可在MDN上查看和學習。

3）本篇全文兩萬字，內容是按照整個學習流程，從外到內進行梳理的，

幾乎每個知識都會有相應示例。

初次接觸可以逐步閱讀，熟悉后，可以當作一個語法查閱手冊。

本篇只梳理了知識點，后續將發布更多實戰操作。

4）歡迎訪問自己寫的一個開放了部分功能的小網站，

有建議和意見，在上面隨便提。域名過期了，還沒補。

http://81.68.151.74/

目前在開發網頁版微信，有興趣可以一起討論。

數據庫操作IDBFactory

增(連接)

使用數據庫，就必須先創建和連接一個數據庫，然后才能對數據庫進行其他操作。

// 處理兼容性問題 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; // open方法創建并連接一個數據庫 const request = window.indexedDB.open(dbname, dbversion) // dbname：數據庫名字 // dbversion：數據庫版本號，可以不寫，默認為1 // indexedDB遵守同源策略，在同一個源下，dbname是不能重復的， // 同一個dbname，也只會存在一個對應的版本號 // 如果dbname不存在，就創建并打開；如果已存在，就直接打開 // indexedDB喜歡把一些操作稱為'請求'，所以用了'request'變量。

刪

// 刪除數據庫 window.indexedDB.deleteDatabase(dbname);

查

window.indexedDB.databases() .then(database => console.log(database)) // database是一個列表 // 列表中每一項包含數據庫名稱和版本號 [{"name": "ok", // 數據庫名稱"version": 2 // 對應版本號},{"name": "todoList","version": 1} ]

請求操作IDBRequest

打開數據庫后，得到一個請求對象request。

const request = window.indexedDB.open(dbname, [dbversion]) console.log('request: ', request); // 打印內容： {error: null,onblocked: null,onerror: null,onsuccess: null,onupgradeneeded: f,readyState: "done",result: {name: 數據庫名稱,version: 數據庫版本號,objectStoreNames: 對象倉庫名稱列表},source: null,transaction: 數據庫事務 }

request中有個result字段和一些on事件，可以使用該字段和相應的事件，處理請求結果。

onsuccess

打開數據庫成功后執行。每次open成功后都會調用一次。

request.onsuccess = function(e) {console.log('打開數據庫成功')const db = this.result; }

onerror

打開數據庫失敗時執行。每次open失敗后調用。

request.onerror = function(e) {console.log('打開數據庫失敗: ', request.error); }

示例：

// 假設當前數據庫名稱為'test', version為2 // 此時，打開test版本為1的話，就會觸發onerror window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; let db; const request = window.indexedDB.open('test', 1); request.onerror = function() {console.log('open error: ', request.error); } // error open error: DOMException: The requested version (1) is less than the existing version (2).

onupgradeneeded

監聽數據庫版本更新。

1）新建數據庫時會調用

2）數據庫版本升級時會調用

而且，該方法的調用，是在onsuccess之前執行。

request.onupgradeneeded = function(e) {const db = this.result;console.log('數據庫新的版本號是：', db.version); }

示例1：

新建數據庫ok時

示例2：

數據庫版本升級時，原來默認的版本是1，現在改為2

result

result是數據庫請求對象request的屬性之一，它對應的是IDBDatabase，

即數據庫對象。后續的操作，都是基于該對象來實現的。

看看result里都有什么？

操作對象庫IDBObjectStore

什么是對象庫

數據庫可以理解為一個個數據表單組成的，其中，每一個表單，就是一個對象庫。

比如，我們有一個名為職業的數據庫，職業中的教師、醫生、碼農，都是職業中

一個下級表單，分別是一個對象庫。主要是按照一定的規則操作數據。

增

1）語法：

// storeName 對象庫名稱 // option 配置項，可選的，用來設置keyPath const objectStore = db.createObjectStore(storeName, option)// 對象庫里都有哪些項，比如姓名年齡等 // indexName 姓名年齡等具體的項 // keyPath 該項的查詢路徑，一般和indexName的值一樣 // option 可選，如unique，為true則表示同一個項的值不能重復 objectStore.createIndex(indexName, keyPath, option); // 刪除具體的項 objectStore.deleteIndex(indexName);

2）只能在onupgradeneeded方法中添加對象庫

個人認為原因有2：

添加對象庫的操作只需要在新建數據庫或版本更新時進行；

onupgradeneeded比onsuccess優先調用，應該更早的創建好對象庫，以免報錯。

示例：

數據庫jobs里，創建了三個對象庫teacher , doctor, developer

刪

db.deleteObjectStore(storeName);

事務對象IDBTransaction

對表單的每一項操作，必須通過具體的事務來完成，一個事務就是一個transaction.

事務是對象庫接口的API

操作事務在request.onsuccess中完成。

transaction

事務。

語法：

// 創建事務 const transaction = db.transaction(storeNames, mode, options) // storeNames對象庫名稱列表。如['teacher', 'doctor']， // 如果只寫一個對象庫名稱，可以寫成字符串，如'teacher' // mode 權限 // 在對象庫內的數據需要變動時，需要設置權限為'readwrite'，可讀可寫 // 在查詢對象庫數據時，權限可以設置為'readonly'，只讀模式 // options，配置項，可選的。

此時，要操作哪個對象庫，就通過transaction.objectStore獲取該對象庫的事務

const store = transaction.objectStore(storeName); // storeName 對象庫名稱

操作對象庫事務的結果有成功和失敗事件來監聽：

// 這里的res是sotre操作對應的方法后的執行結果，后面會提到 res.onerror = function() {console.log('處理事務失敗...')； } res.onsuccess = function() {console.log('處理事務成功...'); }

增

往對象庫內增加數據。

語法：

const res = store.add(data); res.onerror = function() {// res.error是失敗的原因console.log('處理事務失敗: ', res.error)； } res.onsuccess = function() {// res.result是增加的該項數據的keyPath值console.log('處理事務成功: ', res.result); }

注意事項：

1）添加的數據中，必須包含keyPath值，不然就報錯

Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value.

2）添加數據時，keyPath值不能重復，也不能是已經存在的keypPath值，

不然就添加失敗。

假定keyPath為'id',且id的值1已經存在，此時再重復添加： const res = store.add({ id: 1, name: 'liushishi', age: 20 }); 就會觸發onerror： add data error: DOMException: Key already exists in the object store.

示例：

刪

刪除對象庫中的一條數據。

語法：

const res = store.delete(id) // id是keyPath值 // 執行該方法后，會刪除keyPath的值為id的那條數據。

示例：

request.onsuccess = function() {console.log('request: ', request.result);db = this.result;// 刪const transaction = db.transaction('teacher', 'readwrite');const store = transaction.objectStore('teacher');const res = store.delete(2); // 刪除id為2的那條數據res.onerror = function() {console.log('add data error: ', res.error);}res.onsuccess = function() {console.log('add data success...');} }

改

修改對象庫中的某條數據。

如果已經存在，就修改值；

如果不存在，就添加到對象庫中。

注意，該方法是用于修改整條數據的內容，而不是修改數據中某個字段的值。

如果需要修改某個字段的值，可以使用對象庫遍歷方法。

語法：

const res = store.put(data); res.onerror = function() {console.log('update data error: ', res.error); } res.onsuccess = function() {// result表示當前更新的數據的keyPath值console.log('update data success: ', res.result); }

示例：

request.onsuccess = function() {console.log('request: ', request.result);db = this.result;// 改const transaction = db.transaction('teacher', 'readwrite');const store = transaction.objectStore('teacher');const res = store.put({id: 1, name: 'dilireba', age: 18});res.onerror = function() {console.log('put data error: ', res.error);}res.onsuccess = function() {console.log('put data success...', res.result); // 1} }

查

查詢某條對應keyPath值的數據。

語法：

// id是數據中的keyPath值 const res = store.get(id); res.onerror = function() {console.log('find data error: ', res.error); } res.onsuccess = function() {// result是查詢到的數據結果console.log('find data success: ', res.result); } // 需要注意的是，查詢時，事務權限設置為'readonly'即可。

示例：

request.onsuccess = function() {console.log('request: ', request.result);db = this.result;// 查const transaction = db.transaction('teacher', 'readonly');const store = transaction.objectStore('teacher');const res = store.get(1); // 查id為1的那條數據res.onerror = function() {console.log('put data error: ', res.error);}res.onsuccess = function() {console.log('put data success...', res.result);// {id: 1, name: 'dilireba', age: 18}} }

清除

清除某個對象庫中的所有數據。

語法：

const res = store.clear(); res.onerror = function() {console.log('put data error: ', res.error); } res.onsuccess = function() {console.log('put data success...'); }

示例：

request.onsuccess = function() {console.log('request: ', request.result);db = this.result;// 清除const transaction = db.transaction('teacher', 'readwrite');const store = transaction.objectStore('teacher');const res = store.clear();res.onerror = function() {console.log('put data error: ', res.error);}res.onsuccess = function() {console.log('put data success...');} }

條件查詢

根據條件查詢到符合條件的所有數據。有三種語法。

注意：事務的處理權限設置為readonly即可。

語法一：查詢某個對象庫中的所有數據

const res = store.getAll(); res.onerror = function() {console.log('find all datas error: ', res.error); } res.onsuccess = function() {// result是所有數據組成的列表[...]console.log('find all datas success: ', res.result); }

示例：

request.onsuccess = function() {console.log('request: ', request.result);db = this.result;// 條件查詢const transaction = db.transaction('teacher', 'readonly');const store = transaction.objectStore('teacher');const res = store.getAll();res.onerror = function() {console.log('put data error: ', res.error);}res.onsuccess = function() {console.log('put data success...: ', res.result);// [{id: 1, name: 'dilireba', age: 18},// {id: 2, name: 'zhaoliying', age: 19},// {id: 3, name: 'liuyifei', age: 20}]} }

語法二：查詢某個對象庫中所有符合query條件的數據。

const res = store.getAll(query); res.onerror = function() {console.log('find all datas error: ', res.error); } res.onsuccess = function() {// result是返回的數據組成的列表[...]console.log('find all datas success: ', res.result); } // 這里是query參數，是指符合IDBKeyRange篩選條件的一個范圍。 // 如果數據中的pathKey的值在這個范圍內，就會作為數據返回。 // 以下是query和范圍的對應關系：范圍對應的代碼，query

All keys ≥ x	IDBKeyRange.lowerBound(x)
All keys > x	IDBKeyRange.lowerBound(x, true)
All keys ≤ y	IDBKeyRange.upperBound(y)
All keys < y	IDBKeyRange.upperBound(y, true)
All keys ≥ x && ≤ y	IDBKeyRange.bound (x, y)
All keys > x &&< y	IDBKeyRange.bound (x, y, true, true)
All keys > x && ≤ y	IDBKeyRange.bound (x, y, true, false)
All keys ≥ x &&< y	IDBKeyRange.bound(x, y, false, true)
The key = z	IDBKeyRange.only (z)

示例：

request.onsuccess = function() {db = this.result;// 數據中的id值大于等于2const query = IDBKeyRange.lowerBound(2);// 條件查詢const transaction = db.transaction('teacher', 'readonly');const store = transaction.objectStore('teacher');const res = store.getAll(query);res.onerror = function() {console.log('get data error: ', res.error);}res.onsuccess = function() {console.log('get data success...: ', res.result);// [{id: 2, name: 'zhaoliying', age: 19},// {id: 3, name: 'liuyifei', age: 20}]} }

語法三：查詢某個對象庫中一定條數的符合query條件的數據。

const res = store.getAll(query, count); res.onerror = function() {console.log('find all datas error: ', res.error); } res.onsuccess = function() {// result是返回的數據組成的列表[...]console.log('find all datas success: ', res.result); } // count是要獲取到的數據條數，必須是在0~2^32 - 1的范圍內的數字，超出會報錯。

示例：

request.onsuccess = function() {db = this.result;const query = IDBKeyRange.lowerBound(2);// 條件查詢const transaction = db.transaction('teacher', 'readonly');const store = transaction.objectStore('teacher');const res = store.getAll(query, 1); // 取符合條件的前1條數據res.onerror = function() {console.log('get data error: ', res.error);}res.onsuccess = function() {console.log('get data success...: ', res.result);// [{id: 2, name: 'zhaoliying', age: 19}]} }

條件查詢keyPath值

語法也是有三條，參數同條件查詢。

// 語法一 const res = store.getAllKeys(); // 語法二 const res = store.getAllKeys(query); // 語法三 const res = store.getAllKeys(query, count);

簡單示例：

request.onsuccess = function() {db = this.result;const transaction = db.transaction('teacher', 'readonly');const store = transaction.objectStore('teacher');const res = store.getAllKeys();res.onerror = function() {console.log('get keys error: ', res.error);}res.onsuccess = function() {console.log('get keys success...: ', res.result);// 結果就是id值組成的列表[1, 2, 3] } }

對象庫中數據的條數

查詢某個對象庫中有多少條數據。

語法有兩種。

語法一：獲取該對象庫中共有多少條數據

const res = store.count(); res.onerror = function() {console.log('count data error: ', res.error); } res.onsuccess = function() {console.log('該對象庫中一共有' + res.result + '條數據'.); }

示例：

request.onsuccess = function() {db = this.result;const transaction = db.transaction('teacher', 'readonly');const store = transaction.objectStore('teacher');const res = store.count();res.onerror = function() {console.log('count data error: ', res.error);}res.onsuccess = function() {console.log('count data success...: ', res.result); // 3} }

語法二：

條件查詢，符合某個條件的數據共有多少條。

// 參數query仍然是符合IDBKeyRange篩選條件的一個范圍。參考上表。 const res = store.count(query); res.onerror = function() {console.log('count data error: ', res.error); } res.onsuccess = function() {console.log('該對象庫中符合query條件的數據一共有' + res.result + '條'.); }

對象庫遍歷IDBCursor

IDBCursor接口表示一個游標，用于遍歷或迭代數據庫中的多條記錄。

游標可以理解為下標或者指針，指示需要遍歷哪一個索引或者對象存儲區。

語法

store.openCursor

該方法用于打開一個游標，開啟遍歷。

它還可以有傳遞兩個參數store.openCursor(query, direction)

query表示要查詢的鍵或者上面表格中的范圍值。可選的。 direction表示游標要移動的方向，有4個值： - next 默認值。表示下一個，鍵值從小到大一個個遍歷，也就是正序遍歷。 - nextunique 正序遍歷時，過濾掉重復項，會從重復項中選取較小的那個值。 - prev 表示鍵值從大到小一個個遍歷，也就是倒序遍歷。 - prevunique 倒序遍歷時，過濾掉重復項。

示例：

request.onsuccess = function() {db = this.result; // 這里是this指向requestconst transaction = db.transaction('teacher', 'readwrite');const store = transaction.objectStore('teacher');const res = store.openCursor(); // 開啟遍歷res.onerror = function() {console.log('each data error: ', res.error);}res.onsuccess = function() { // 這里面的內容將被遍歷執行console.log('each data success...');const cursor = this.result; // 這里的this指向resif(cursor) {console.log('val: ', cursor.value);cursor.continue();} else {console.log('沒有更多結果了...');}} }

示例執行結果：

each data success... val: {id: 1, name: 'dilireba', age: 18} each data success... val: {id: 2, name: 'haha', age: 19} each data success... val: {id: 3, name: 'liuyifei', age: 20} each data success... val: {id: 4, name: 'lilei', age: 21} each data success... val: {id: 5, name: 'hanmeimei', age: 22} each data success... val: {id: 6, name: 'lihua', age: 23} 沒有更多結果了...

cursor.advance or cursor.continue

該語句不能缺少，不然無法遍歷數據。

cursor.advance是表示每一步遍歷，要跳過多少個下標必須填寫一個大于0的整數作為參數。

比如當前在teacher對象庫中有如下6個數據：

{id: 1, name: 'dilireba', age: 18}, {id: 2, name: 'haha', age: 19} {id: 3, name: 'liuyifei', age: 20} {id: 4, name: 'lilei', age: 21} {id: 5, name: 'hanmeimei', age: 22} {id: 6, name: 'lihua', age: 23}

給advance設置不同的值，會得到不同的結果：

// cursor.advance(1) // 每次移動一次下標 {id: 1, name: 'dilireba', age: 18}, {id: 2, name: 'haha', age: 19}, {id: 3, name: 'liuyifei', age: 20}, {id: 4, name: 'lilei', age: 21}, {id: 5, name: 'hanmeimei', age: 22}, {id: 6, name: 'lihua', age: 23} // cursor.advance(2) // 每次移動2次下標，先遍歷id 1，移動兩次，遍歷到id 3，以此類推。 {id: 1, name: 'dilireba', age: 18}, {id: 3, name: 'liuyifei', age: 20}, {id: 5, name: 'hanmeimei', age: 22} // cursor.advance(3) // 每次移動3次下標，先遍歷id 1，然后移動3次下標，遍歷到id 4，以此類推。 {id: 1, name: 'dilireba', age: 18}, {id: 4, name: 'lilei', age: 21} cursor.continue是表示挨個遍歷。相當于cursor.advance(1)

3）cursor.delete()

無參數。

刪除游標位置記錄，而不改變游標的位置。可以簡單理解為，

用于刪除對象庫中的某些特定數據。

假定仍然是上述示例中的6條數據，

// 遍歷時判斷當id為2時，執行delete操作，刪除id為2的這條數據 if(curcor) {if(curcor.value.id === 2) {curcor.delete(); // id為2的數據被刪除} } else {console.log('沒有更多的結果了...'); }

4）cursor.update()

更新對象庫中當前游標位置的值，可以用于更改特定數據中的某個字段的值。

示例：

// 把id為2的數據中的name值改為'張三' if(curcor) {if(curcor.value.id === 2) {curcor.update({...curcor.value, name: '張三'});} } else {// ... }

按照對象庫的數據的keyPath進行遍歷

1）語法：

const store = transaction.objectStore('teacher').index(indexKeyPath);

這里必須說說對象庫的keyPath和對象庫數據的keyPath，剛接觸的時候可能造成混淆。

2）為什么會出現不同的keyPath?

一個對象庫，比如teacher，里面的數據可能有很多個字段，比如id , name, age, sex, hobby等。

{ id: 1, name: 'dilireba', age: 18, sex: 0, hobby: 'sleep' }

id是對象庫的keyPath，也就是說，我們在遍歷對象庫時，是根據id進行遍歷的，

但是實際應用中，我們還可能根據名字name進行遍歷，也可能是根據年齡age進行遍歷，

為了解決這個問題，就出現了對象庫的keyPath和對象庫數據的keyPath。

3）怎么區分？

示例：

request.onupgradeneeded = function() {console.log('open upgrade...');db = this.result;if(!db.objectStoreNames.contains('teacher')) {const objectStore = db.createObjectStore('teacher', { keyPath: 'id' });objectStore.createIndex('name', 'name', { unique: true });objectStore.createIndex('age', 'age', { unique: false })} }

在示例中，通過db.createObjectStore創建對象庫并設置的keyPath就是對象庫的keyPath，

也就是此處的id就是對象庫teacher的keyPath，遍歷對象庫，都是根據id的值來遍歷的。

而示例中通過objectStore.createIndex創建的name和age，就是數據的keyPath。

在遍歷對象庫中的數據時，也可以通過name和age進行遍歷。

4）如何使用數據中的keyPath進行遍歷？

語法：

const store = transaction.objectStore('teacher').index(indexKeyPath);

示例1：根據age進行遍歷

request.onsuccess = function() {db = this.result; // 這里是this指向requestconst transaction = db.transaction('teacher', 'readwrite');// index('age')const store = transaction.objectStore('teacher').index('age');const res = store.openCursor();res.onerror = function() {console.log('each data error: ', res.error);}res.onsuccess = function() {console.log('each data success...');const cursor = this.result; // 這里的this指向resif(cursor) {console.log('val: ', cursor.value);cursor.continue();} else {console.log('沒有更多結果了...');}} }

示例結果：

{id: 3, name: 'zhangsan', age: 16} {id: 1, name: 'dilireba', age: 18} {id: 4, name: 'lilei', age: 21} {id: 5, name: 'hanmeimei', age: 22} {id: 6, name: 'lihua', age: 23} {id: 2, name: 'liuyifei', age: 32}

示例2：根據name進行遍歷

request.onsuccess = function() {db = this.result; // 這里是this指向requestconst transaction = db.transaction('teacher', 'readwrite');// index('name')const store = transaction.objectStore('teacher').index('name');const res = store.openCursor();res.onerror = function() {console.log('each data error: ', res.error);}res.onsuccess = function() {console.log('each data success...');const cursor = this.result; // 這里的this指向resif(cursor) {console.log('val: ', cursor.value);cursor.continue();} else {console.log('沒有更多結果了...');}} }

示例結果：

{id: 1, name: 'dilireba', age: 18} {id: 5, name: 'hanmeimei', age: 22} {id: 6, name: 'lihua', age: 23} {id: 4, name: 'lilei', age: 21} {id: 2, name: 'liuyifei', age: 32} {id: 3, name: 'zhangsan', age: 16}

學習資料

MDN
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
IndexedDB阮一峰
https://www.ruanyifeng.com/blog/2018/07/indexeddb.html

總結

以上是生活随笔為你收集整理的【indexedDB】indexedDB知识梳理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： UI必备颜色表
下一篇： MCMC和贝叶斯统计在宇宙微波背景辐射（

编程问答

【indexedDB】indexedDB知识梳理

目錄

indexedDB介紹

數據庫操作IDBFactory

增(連接)

刪

查

請求操作IDBRequest

onsuccess

onerror

onupgradeneeded

result

操作對象庫IDBObjectStore

什么是對象庫

增

刪

事務對象IDBTransaction

transaction

增

刪

改

查

清除

條件查詢

條件查詢keyPath值

對象庫中數據的條數

對象庫遍歷IDBCursor

語法

按照對象庫的數據的keyPath進行遍歷

學習資料

總結