目錄

• 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時

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; let db; const request = window.indexedDB.open('songs'); request.onerror = function() {console.log('open error: ', request.error); } request.onsuccess = function() {db = this.result;console.log('open success, dbbase current version: ', db.version); } request.onupgradeneeded = function() {console.log('open upgrade...'); } // 打印結果： // open upgrade... // open success, dbbase current version: 1

示例2：

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

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; let db; const request = window.indexedDB.open('songs', 2); request.onerror = function() {console.log('open error: ', request.error); } request.onsuccess = function() {db = this.result;console.log('open success, dbbase current version: ', db.version); } request.onupgradeneeded = function() {console.log('open upgrade...'); } // 打印結果： // open upgrade... // open success, dbbase current version: 2

---

result

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

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

看看result里都有什么？

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; let db; const request = window.indexedDB.open('songs', 2); request.onsuccess = function() {console.log('request: ', request.result);db = this.result; } // 打印結果 IDBDatabase {name: 'songs',version: 2,objectStoreNames: 對象庫名稱列表onabort: null,onclose: null,onerror: null,onversionchange: null } // 原型中還有： {close: f, // 關閉數據庫createObjectStore: f, // 創建對象庫deleteObjectStore: f, // 刪除對象庫transaction: f // 處理事務的方法 }

---

操作對象庫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

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; let db; const request = window.indexedDB.open('jobs'); request.onerror = function() {console.log('open error: ', request.error); } request.onsuccess = function() {console.log('request: ', request.result);db = this.result; } request.onupgradeneeded = function() {console.log('open upgrade...');db = this.result;if(!db.objectStoreNames.contains('teacher')) {db.createObjectStore('teacher', { keyPath: 'id' });objectStore.createIndex('name', 'name', { unique: true });objectStore.createIndex('age', 'age', { unique: false })}if(!db.objectStoreNames.contains('doctor')) {db.createObjectStore('doctor', { keyPath: 'id' });}if(!db.objectStoreNames.contains('developer')) {db.createObjectStore('developer', { keyPath: 'id' });} }

---

刪

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.

示例：

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; let db; const request = window.indexedDB.open('jobs'); request.onerror = function() {console.log('open error: ', request.error); } 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.add({ id: 1, name: 'dilireba', age: 18 });res.onerror = function() {console.log('add data error: ', res.error);}res.onsuccess = function() {console.log('add data success: ', res.result); // 1} } 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 })}if(!db.objectStoreNames.contains('doctor')) {db.createObjectStore('doctor', { keyPath: 'id' });}if(!db.objectStoreNames.contains('developer')) {db.createObjectStore('developer', { keyPath: 'id' });} }

---

刪

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

語法：

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知识梳理的全部內容，希望文章能夠幫你解決所遇到的問題。

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