前言

? ? ? ? 最近在做一個脫機的項目，數據需要保存到前端，前端頁面的操作大部分也是基于IndexdDB的，而該項目之前用的也是IndexedDB，在這里和大家分享下學習到的IndexdDB基本操作和學習時的遇到的一些坑。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ------ 學習，分享

大綱

---

一，IndexedDB簡要?

二，判斷瀏覽器是否支持IndexedDB

三，如何創建一個對象倉庫（創建表）

四，實現IndexedDB的增加/修改

五，實現IndexedDB的刪除

六，實現IndexedDB的查詢（著重分享）

七，關于IndexedDB的回調使用問題

八，總結

文檔鏈接：（注意，有的api需要網頁語言選擇英文才有）

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

一，IndexdDB簡要 （官方概述）

????????IndexedDB 是一個事務型數據庫系統，類似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，IndexedDB 是一個基于 JavaScript 的面向對象數據庫。IndexedDB 允許您存儲和檢索用鍵索引的對象；可以存儲結構化克隆算法支持的任何對象。您只需要指定數據庫模式，打開與數據庫的連接，然后檢索和更新。

（IndexedDB 的數據結構類似于redis，是以key&value的形式存儲）

二，判斷瀏覽器是否支持IndexedDB

var indexedDB =window.indexedDB ||window.webkitIndexedDB ||window.mozIndexedDB ||window.msIndexedDB; //獲取IDBFactory接口實例if (!indexedDB) {console.log('你的瀏覽器不支持IndexedDB');}

三，?如何創建一個對象倉庫（創建表）

①打開庫

//此處version代表的版本，具體看文檔，這里不做講解var request = indexedDB.open(databaseName, version);request.onerror = function (event) {console.log('indexeddb打開失敗');};request.onsuccess = function (event) {var db = event.target.result;console.log('indexeddb打開成功');};

②創建表（此篇以student表為例），創建索引

//upgradeneeded?事件的事件處理器，會在當一個數據庫的版本比已經存在的版本還高的時候觸發。 request.onupgradeneeded = function (event) {db = event.target.result;console.log('indexeddb更新成功');var objectStore;//新增對象倉庫if (!db.objectStoreNames.contains('student')) {//如果該表不存在，創建表//使用student的id屬性作為主鍵，也可以使用默認的自增主鍵//objectStore = db.createObjectStore('student', { autoIncrement: true });objectStore = db.createObjectStore('student', { keyPath: 'id' });//創建索引，其三個屬性分別是，索引名稱，索引所代表屬性，是否唯一objectStore.createIndex('name', ['name'], { unique: true });} }

四，實現IndexedDB的增加/修改?

①新增數據

//IndexdDB都是通過事務操作的，此處開啟一個事務，賦予讀寫的權限 var transaction= db.transaction(["student"], "readwrite") //獲取表的實例，得到objectStore 就可以開始操作了 var objectStore = .objectStore("student"); //此處添加一個student對象 var request = objectStore.add(this.student); //每一個操作都會有成功和是失敗的回調 request.onerror = (event) => {console.log("添加成功"); }; request.onsuccess= (event) => {console.log("添加成功"); };

當然，你也可以用?objectStore.put（this.student）來新增，前提是表里面沒有相同的數據

②修改數據 （相同部分省略）

//put后的2個參數，name代表被修改對象的屬性（同時必須是主鍵！） var putRequest = objectStore.put(this.student,this.student.id); putRequest .onerror = (event) => {console.log("修改失敗"); }; putRequest .onsuccess= (event) => {console.log("修改成功"); };

五，實現IndexedDB的刪除

此處只介紹通過key刪除（相同部分省略），通過范圍刪除，詳見文檔KeyRange

//delete()可通過主鍵和主鍵范圍刪除 例如：var request = objectStore.delete(KeyRange); var deRequest = objectStore.delete(this.student.id); deRequest .onerror = (event) => {console.log("刪除失敗"); }; deRequest .onsuccess= (event) => {console.log("刪除成功"); };

六，實現IndexdDB的查詢（重點來了）

①objectStore.getAll()查詢全部

//objectStore.getAll(query, count)其實有2個參數，query是代表需要查詢的key或者KeyRange //count代表在IDBKeyRange下查詢到多個對象時，指定返回的數量 //此處不加參，默認查詢所有 var getAll = objectStore.getAll(); getAll.onerror = (event) => {console.log("查詢失敗"); }; getAll.onsuccess= (event) => {//list就是查詢到的所有數據var list = getAll.resultconsole.log("查詢成功"); };

②objectStore.openCursor()查詢全部，此處的openCursor()是一個游標，詳見文檔IDBCursor。

它和上面的方法不一樣，在成功回調的函數里面，相當于是一個循環，list.continue()就相當于是接

著循環的意思，必不可少。

var _this = this; var cursor = objectStore.openCursor(); cursor.onerror = (event) => {console.log("查詢失敗"); }; cursor.onsuccess= (event) => {//此處與上面不同var list = event.target.result;if(list)//此回調中list.continue()必不可少，詳見文檔//此處以data[]接受數據為例_this.data.push(list);list.continue();}console.log("查詢成功"); };

③objectStore.index()通過索引，使用游標返回按該索引排序的一系列記錄，相當于條件查詢，返回符合當前條件的條目。

var _this = this var transaction = db.transaction(["student"],"readonly") var objectStore = objectStore("student"); //此處選擇我們的之前所創建的索引名稱 var myIndex = objectStore.index('name');//拿到實例 //IDBKeyRange.only創建一個包含單個值的范圍 var keyRange = IDBKeyRange.only('張三');//定義查詢條件為張三 myIndex.openCursor(keyRange).onerror = (event) => {console.log('查詢失敗') }; myIndex.openCursor(keyRange).onsuccess= (event) => {//此處相當于是查詢到所有name='張三'的數據if(list)_this.data.push(list);list.continue();}console.log('查詢成功') };

（如果是要通過條件查詢到某一唯一值，可將對象的主鍵或者唯一字段創建索引，用法一樣。）

④關鍵字查詢

//相當于上面2的查詢所有的方法 var keyword = this.keyword//關鍵字 var transaction = _db.transaction(["sutdent"]); var objectStore = transaction.objectStore("sutdent"); var c = objectStore.openCursor(); c.onsuccess = function(e) {var cursor = e.target.result;if (cursor) {var stu = cursor.value;//得到當前對象//判斷當前對象中的name屬性是否有我要檢索的關鍵字if (stu.name.indexOf(keyword) >= 0) {_this.data.push(stu);}cursor.continue();} };

⑤通過objectStore.get(key)主鍵查詢

//通過主鍵查詢，此主鍵可以是默認自增，但是這樣你就不好操作，建議將對象的主鍵 //類似id這樣的設為主鍵，這樣在修改時，可以通過其id做修改 var getOne = objectStore.get(key); getOne.onerror = (event) => {console.log("查詢失敗"); }; getOne.onsuccess= (event) => {//通過key查詢到的數據var list = getAll.resultconsole.log("查詢成功"); };

（查詢這一塊，只知道這么些，其它沒有深入了解，總的來說，IndexdDB在查詢這一塊局限性太大，不比不知道，才發現原來sql很強大。）

七，關于IndexedDB的回調使用問題

? ? ? ? 1.注意使用IndexedDB事務操作賦值時，在成功的回調里面進行賦值，如果在成功的回調外面賦值，數據是拿不到的。因為IndexedDB是過度異步的。

? ? ? ? 2.因為賦值是在成功的回調里面的，所以后續如果有其他的IndexedDB的操作，可以在一個回調里面嵌套其他事務，然后就是一個回調嵌套下一個回調，然后嵌套下一個回調.......

? ? ? ? 3.大家也看到了，上面代碼中this的使用，在回調外面定義var _this = this ，這是因為回調里面的this就不是你所熟悉的那個this了，當前指定對象不同。

八，總結

? ? ? ?IndexedDB的數據結構是類似于redis的key&value形式存儲，它是一個瀏覽器數據庫，允許儲存大量數據。

????????emmm，總的來說，我個人接觸IndexedDB也不多，在csdn中搜到的相關也很少，所以大家在使用的時候，還是多看看文檔。

????????IndexdDB個人使用完后，只覺得要不是需求需要，我才不會去用IndexedDB，相比我們常用的sql，這個用起來簡直太繁瑣和麻煩了。（主要是接任務時一開始還不會這個鬼東西~~）

????????本人新手一枚，第一次發博，如果文中有寫錯或者說錯的地方，還望大家指出，也歡迎大家一起探討，一起學習，一起分享！

總結

以上是生活随笔為你收集整理的IndexedDB基本操作学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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