【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時
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: 2result
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和范圍的對應關系:| 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(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是表示每一步遍歷,要跳過多少個下標 必須填寫一個大于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必备颜色表
- 下一篇: Android 福彩3D体彩排列(源码+