一、概論

????????IndexedDB 就是瀏覽器提供的本地?cái)?shù)據(jù)庫(kù)，它可以被網(wǎng)頁(yè)腳本創(chuàng)建喝操作。IndexedDB 允許存儲(chǔ)大量數(shù)據(jù)，提供查找接口，還能建立索引。就數(shù)據(jù)庫(kù)類型而言，IndexedDB 是非關(guān)系型數(shù)據(jù)庫(kù)（不支持 SQL 查詢語(yǔ)句），更接近 NoSQL 數(shù)據(jù)庫(kù)。

二、IndexedDB 特點(diǎn)

• 鍵值對(duì)存儲(chǔ)：IndexedDB 內(nèi)部采用對(duì)象倉(cāng)庫(kù) （ object store ）存放數(shù)據(jù)。 所有類型的數(shù)據(jù)都可以直接存入，包括 JavaScaript 對(duì)象。對(duì)象倉(cāng)庫(kù)中，數(shù)據(jù)以‘鍵值對(duì)’的形式保存，每一個(gè)數(shù)據(jù)記錄都有對(duì)應(yīng)的主鍵，主鍵是獨(dú)一無(wú)二的，不能重復(fù)，否則會(huì)拋出一個(gè)錯(cuò)誤，
• 異步：IndexedDB 操作時(shí)不會(huì)鎖死瀏覽器，用戶依然可以進(jìn)行其他操作，這與 LocalStorage 形成對(duì)比，后者的操作時(shí)同步的。異步設(shè)計(jì)是為了防止大量的數(shù)據(jù)的讀寫，拖慢了網(wǎng)頁(yè)的表現(xiàn)。
• 支持事務(wù)：IndexedDB 支持事務(wù)（?transaction?）,這意味著一系列操作步驟之中，只要有一步失敗，整個(gè)事務(wù)就都會(huì)取消，數(shù)據(jù)庫(kù)回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分?jǐn)?shù)據(jù)的情況。
• 同源限制：IndexedDB 受到同源限制，每一個(gè)數(shù)據(jù)庫(kù)對(duì)應(yīng)創(chuàng)建它的域名。網(wǎng)頁(yè)只能訪問(wèn)自身域名下的數(shù)據(jù)庫(kù)，而不能訪問(wèn)跨域的數(shù)據(jù)庫(kù)。
• 存儲(chǔ)空間大：IndexedDB 的存儲(chǔ)空間比 LocalStorage 大得多，一般來(lái)說(shuō)不少于 250MB , 甚至沒(méi)有上限。
• 支持二進(jìn)制存儲(chǔ)。IndexedDB 不僅可以存儲(chǔ)字符串，還可以存儲(chǔ)二進(jìn)制數(shù)據(jù)（ArrayBuffer 對(duì)象和 Blob 對(duì)象）。

三、打開數(shù)據(jù)庫(kù)

????????使用 IndexedDB 的第一步是打開數(shù)據(jù)庫(kù)，使用 indexedDB.open() 方法。

// databaseName 數(shù)據(jù)庫(kù)名, version數(shù)據(jù)庫(kù)版本 let request = window.indexeddDB.open(databaseName, version);

????????indexedDB.open() 方法返回一個(gè) IDBRequest 對(duì)象。這個(gè)對(duì)象通過(guò)三種事件 error、success、upgradeneeded, 處理打開數(shù)據(jù)庫(kù)的操作結(jié)果。

? ????????1、error 事件 （ error 事件表示打開數(shù)據(jù)庫(kù)失敗 ）

request.onerror = function (event) {console.log('數(shù)據(jù)庫(kù)打開報(bào)錯(cuò)'); };

?????????2、success 事件（ success 事件表示成功打開數(shù)據(jù)庫(kù) ）

var db;request.onsuccess = function (event) {db = request.result;console.log('數(shù)據(jù)庫(kù)打開成功'); };// 這時(shí)通過(guò)request對(duì)象的result屬性拿到數(shù)據(jù)庫(kù)對(duì)象。

????????3、upgradeneeded 事件 （如果指定的版本號(hào)大于數(shù)據(jù)庫(kù)的實(shí)際版本號(hào)，就會(huì)發(fā)生數(shù)據(jù)庫(kù)升級(jí)事件）

var db;request.onupgradeneeded = function (event) {db = event.target.result; }// 這時(shí)通過(guò)事件對(duì)象的target.result屬性，拿到數(shù)據(jù)庫(kù)實(shí)例。

四、刪除數(shù)據(jù)庫(kù)

????indexedDB.deleteDatabase()方法用于刪除一個(gè)數(shù)據(jù)庫(kù)，參數(shù)為數(shù)據(jù)庫(kù)的名字。它會(huì)立刻返回一個(gè)?IDBOpenDBRequest?對(duì)象，然后對(duì)數(shù)據(jù)庫(kù)執(zhí)行異步刪除。刪除操作的結(jié)果會(huì)通過(guò)事件通知，IDBOpenDBRequest對(duì)象可以監(jiān)聽以下事件。

let DBDeleteRequest = window.indexedDB.deleteDatabase('demo');DBDeleteRequest.onerror = function (event) {console.log('Error'); };DBDeleteRequest.onsuccess = function (event) {console.log('success'); };// 調(diào)用deleteDatabase()方法以后，當(dāng)前數(shù)據(jù)庫(kù)的其他已經(jīng)打開的連接都會(huì)接收到versionchange事件。// 注意，刪除不存在的數(shù)據(jù)庫(kù)并不會(huì)報(bào)錯(cuò)。

五、新建數(shù)據(jù)庫(kù)

????????新建數(shù)據(jù)庫(kù)與打開數(shù)據(jù)庫(kù)是同一個(gè)操作。如果指定的數(shù)據(jù)庫(kù)不存在，就會(huì)新建。不同之處在于，后續(xù)的操作主要在?upgradeneeded?事件的監(jiān)聽函數(shù)里面完成，因?yàn)檫@時(shí)版本從無(wú)到有，所以會(huì)觸發(fā)這個(gè)事件。

????????通常，新建數(shù)據(jù)庫(kù)以后，第一件事是新建對(duì)象倉(cāng)庫(kù)（即新建表）。

request.onupgradeneeded = function(event) {db = event.target.result;var objectStore = db.createObjectStore('person', { keyPath: 'id' }); }

????????上面代碼中，數(shù)據(jù)庫(kù)新建成功以后，新增一張叫做?person?的表格，主鍵是id。

????????更好的寫法是先判斷一下，這張表格是否存在，如果不存在再新建。

request.onupgradeneeded = function (event) {db = event.target.result;var objectStore;if (!db.objectStoreNames.contains('person')) {objectStore = db.createObjectStore('person', { keyPath: 'id' });} }

????????主鍵（key）是默認(rèn)建立索引的屬性。比如，數(shù)據(jù)記錄是{ id: 1, name: '張三' }，那么id屬性可以作為主鍵。主鍵也可以指定為下一層對(duì)象的屬性，比如{ foo: { bar: 'baz' } }的foo.bar也可以指定為主鍵。

????????如果數(shù)據(jù)記錄里面沒(méi)有合適作為主鍵的屬性，那么可以讓 IndexedDB 自動(dòng)生成主鍵。

var objectStore = db.createObjectStore('person',{ autoIncrement: true } );

????????上面代碼中，指定主鍵為一個(gè)遞增的整數(shù)。

????????新建對(duì)象倉(cāng)庫(kù)以后，下一步可以新建索引。

request.onupgradeneeded = function(event) {db = event.target.result;var objectStore = db.createObjectStore('person', { keyPath: 'id' });objectStore.createIndex('name', 'name', { unique: false });objectStore.createIndex('email', 'email', { unique: true }); }

????????上面代碼中，IDBObject.createIndex()的三個(gè)參數(shù)分別為索引名稱、索引所在的屬性、配置對(duì)象（說(shuō)明該屬性是否包含重復(fù)的值）。

六、新增數(shù)據(jù)

????????新增數(shù)據(jù)指的是向?qū)ο髠}(cāng)庫(kù)寫入數(shù)據(jù)記錄。這需要通過(guò)事務(wù)完成。

function add() {var request = db.transaction(['person'], 'readwrite').objectStore('person').add({ id: 1, name: '張三', age: 24, email: 'zhangsan@example.com' });request.onsuccess = function (event) {console.log('數(shù)據(jù)寫入成功');};request.onerror = function (event) {console.log('數(shù)據(jù)寫入失敗');} }add();

????????上面代碼中，寫入數(shù)據(jù)需要新建一個(gè)事務(wù)。新建時(shí)必須指定表格名稱和操作模式（“只讀”或“讀寫”）。新建事務(wù)以后，通過(guò)?IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 對(duì)象，再通過(guò)表格對(duì)象的add()方法，向表格寫入一條記錄。

????????寫入操作是一個(gè)異步操作，通過(guò)監(jiān)聽連接對(duì)象的success事件和error事件，了解是否寫入成功。

七、讀取數(shù)據(jù)

????????讀取數(shù)據(jù)也是通過(guò)事務(wù)完成。

function read() {var transaction = db.transaction(['person']);var objectStore = transaction.objectStore('person');var request = objectStore.get(1);request.onerror = function(event) {console.log('事務(wù)失敗');};request.onsuccess = function( event) {if (request.result) {console.log('Name: ' + request.result.name);console.log('Age: ' + request.result.age);console.log('Email: ' + request.result.email);} else {console.log('未獲得數(shù)據(jù)記錄');}}; }read();

????????上面代碼中，objectStore.get()方法用于讀取數(shù)據(jù)，參數(shù)是主鍵的值。

八、遍歷數(shù)據(jù)

????????遍歷數(shù)據(jù)表格的所有記錄，要使用指針對(duì)象 IDBCursor。

function readAll() {var objectStore = db.transaction('person').objectStore('person');objectStore.openCursor().onsuccess = function (event) {var cursor = event.target.result;if (cursor) {console.log('Id: ' + cursor.key);console.log('Name: ' + cursor.value.name);console.log('Age: ' + cursor.value.age);console.log('Email: ' + cursor.value.email);cursor.continue();} else {console.log('沒(méi)有更多數(shù)據(jù)了！');}}; }readAll();

????????上面代碼中，新建指針對(duì)象的?openCursor()方法是一個(gè)異步操作，所以要監(jiān)聽success事件。

九、更新數(shù)據(jù)

????????更新數(shù)據(jù)要使用IDBObject.put()方法。

function update() {var request = db.transaction(['person'], 'readwrite').objectStore('person').put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });request.onsuccess = function (event) {console.log('數(shù)據(jù)更新成功');};request.onerror = function (event) {console.log('數(shù)據(jù)更新失敗');} }update();

????????上面代碼中，put()方法自動(dòng)更新了主鍵為1的記錄。

十、刪除數(shù)據(jù)

????IDBObjectStore.delete()方法用于刪除記錄。

function remove() {var request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1);request.onsuccess = function (event) {console.log('數(shù)據(jù)刪除成功');}; }remove();

十一、使用索引

????????索引的意義在于，可以讓你搜索任意字段，也就是說(shuō)從任意字段拿到數(shù)據(jù)記錄。如果不建立索引，默認(rèn)只能搜索主鍵（即從主鍵取值）。

????????假定新建表格的時(shí)候，對(duì)name字段建立了索引。

objectStore.createIndex('name', 'name', { unique: false });

????????現(xiàn)在，就可以從name找到對(duì)應(yīng)的數(shù)據(jù)記錄了。

var transaction = db.transaction(['person'], 'readonly'); var store = transaction.objectStore('person'); var index = store.index('name'); var request = index.get('李四');request.onsuccess = function (e) {var result = e.target.result;if (result) {// ...} else {// ...} }

十二、對(duì)比圖?

總結(jié)

以上是生活随笔為你收集整理的Chrome 下IndexedDB 本地存储的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。