一、概述
隨著瀏覽器的功能不斷增強，越來越多的網(wǎng)站開始考慮，將大量數(shù)據(jù)儲存在客戶端，這樣可以減少從服務器獲取數(shù)據(jù)，直接從本地獲取數(shù)據(jù)。
現(xiàn)有的瀏覽器數(shù)據(jù)儲存方案，都不適合儲存大量數(shù)據(jù)：Cookie 的大小不超過4KB，且每次請求都會發(fā)送回服務器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景。
通俗地說，IndexedDB 就是瀏覽器提供的本地數(shù)據(jù)庫，它可以被網(wǎng)頁腳本創(chuàng)建和操作。IndexedDB 允許儲存大量數(shù)據(jù)，提供查找接口，還能建立索引。這些都是 LocalStorage 所不具備的。就數(shù)據(jù)庫類型而言，IndexedDB 不屬于關系型數(shù)據(jù)庫（不支持 SQL 查詢語句），更接近 NoSQL 數(shù)據(jù)庫。
IndexedDB 具有以下特點。
（1）鍵值對儲存。?IndexedDB 內(nèi)部采用對象倉庫（object store）存放數(shù)據(jù)。所有類型的數(shù)據(jù)都可以直接存入，包括 JavaScript 對象。對象倉庫中，數(shù)據(jù)以"鍵值對"的形式保存，每一個數(shù)據(jù)記錄都有對應的主鍵，主鍵是獨一無二的，不能有重復，否則會拋出一個錯誤。
（2）異步。?IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的。異步設計是為了防止大量數(shù)據(jù)的讀寫，拖慢網(wǎng)頁的表現(xiàn)。
（3）支持事務。?IndexedDB 支持事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，數(shù)據(jù)庫回滾到事務發(fā)生之前的狀態(tài)，不存在只改寫一部分數(shù)據(jù)的情況。
（4）同源限制?IndexedDB 受到同源限制，每一個數(shù)據(jù)庫對應創(chuàng)建它的域名。網(wǎng)頁只能訪問自身域名下的數(shù)據(jù)庫，而不能訪問跨域的數(shù)據(jù)庫。
（5）儲存空間大?IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少于 250MB，甚至沒有上限。
（6）支持二進制儲存。?IndexedDB 不僅可以儲存字符串，還可以儲存二進制數(shù)據(jù)（ArrayBuffer 對象和 Blob 對象）。
二、基本概念
IndexedDB 是一個比較復雜的 API，涉及不少概念。它把不同的實體，抽象成一個個對象接口。學習這個 API，就是學習它的各種對象接口。
數(shù)據(jù)庫：IDBDatabase 對象
對象倉庫：IDBObjectStore 對象
索引： IDBIndex 對象
事務： IDBTransaction 對象
操作請求：IDBRequest 對象
指針： IDBCursor 對象
主鍵集合：IDBKeyRange 對象
下面是一些主要的概念。
（1）數(shù)據(jù)庫
數(shù)據(jù)庫是一系列相關數(shù)據(jù)的容器。每個域名（嚴格的說，是協(xié)議 + 域名 + 端口）都可以新建任意多個數(shù)據(jù)庫。
IndexedDB 數(shù)據(jù)庫有版本的概念。同一個時刻，只能有一個版本的數(shù)據(jù)庫存在。如果要修改數(shù)據(jù)庫結構（新增或刪除表、索引或者主鍵），只能通過升級數(shù)據(jù)庫版本完成。
（2）對象倉庫
每個數(shù)據(jù)庫包含若干個對象倉庫（object store）。它類似于關系型數(shù)據(jù)庫的表格。
（3）數(shù)據(jù)記錄
對象倉庫保存的是數(shù)據(jù)記錄。每條記錄類似于關系型數(shù)據(jù)庫的行，但是只有主鍵和數(shù)據(jù)體兩部分。主鍵用來建立默認的索引，必須是不同的，否則會報錯。主鍵可以是數(shù)據(jù)記錄里面的一個屬性，也可以指定為一個遞增的整數(shù)編號。
{id:1,text:'foo'}
上面的對象中，id屬性可以當作主鍵。
數(shù)據(jù)體可以是任意數(shù)據(jù)類型，不限于對象。
（4）索引
為了加速數(shù)據(jù)的檢索，可以在對象倉庫里面，為不同的屬性建立索引。
（5）事務
數(shù)據(jù)記錄的讀寫和刪改，都要通過事務完成。事務對象提供error、abort和complete三個事件，用來監(jiān)聽操作結果。
三、操作流程
IndexedDB 數(shù)據(jù)庫的各種操作，一般是按照下面的流程進行的。這個部分只給出簡單的代碼示例，用于快速上手，詳細的各個對象的 API 請看這里。
3.1 打開數(shù)據(jù)庫
使用 IndexedDB 的第一步是打開數(shù)據(jù)庫，使用indexedDB.open()方法。
varrequest=window.indexedDB.open(databaseName,version);
這個方法接受兩個參數(shù)，第一個參數(shù)是字符串，表示數(shù)據(jù)庫的名字。如果指定的數(shù)據(jù)庫不存在，就會新建數(shù)據(jù)庫。第二個參數(shù)是整數(shù)，表示數(shù)據(jù)庫的版本。如果省略，打開已有數(shù)據(jù)庫時，默認為當前版本；新建數(shù)據(jù)庫時，默認為1。
indexedDB.open()方法返回一個 IDBRequest 對象。這個對象通過三種事件error、success、upgradeneeded，處理打開數(shù)據(jù)庫的操作結果。
（1）error 事件
error事件表示打開數(shù)據(jù)庫失敗。
request.onerror=function(event){console.log('數(shù)據(jù)庫打開報錯');};
（2）success 事件
success事件表示成功打開數(shù)據(jù)庫。
vardb;request.onsuccess=function(event){db=request.result;console.log('數(shù)據(jù)庫打開成功');};
這時，通過request對象的result屬性拿到數(shù)據(jù)庫對象。
（3）upgradeneeded 事件
如果指定的版本號，大于數(shù)據(jù)庫的實際版本號，就會發(fā)生數(shù)據(jù)庫升級事件upgradeneeded。
vardb;request.onupgradeneeded=function(event){db=event.target.result;}
這時通過事件對象的target.result屬性，拿到數(shù)據(jù)庫實例。
3.2 新建數(shù)據(jù)庫
新建數(shù)據(jù)庫與打開數(shù)據(jù)庫是同一個操作。如果指定的數(shù)據(jù)庫不存在，就會新建。不同之處在于，后續(xù)的操作主要在upgradeneeded事件的監(jiān)聽函數(shù)里面完成，因為這時版本從無到有，所以會觸發(fā)這個事件。
通常，新建數(shù)據(jù)庫以后，第一件事是新建對象倉庫（即新建表）。
request.onupgradeneeded=function(event){db=event.target.result;varobjectStore=db.createObjectStore('person',{keyPath:'id'});}
上面代碼中，數(shù)據(jù)庫新建成功以后，新增一張叫做person的表格，主鍵是id。
更好的寫法是先判斷一下，這張表格是否存在，如果不存在再新建。
request.onupgradeneeded=function(event){db=event.target.result;varobjectStore;if(!db.objectStoreNames.contains('person')){objectStore=db.createObjectStore('person',{keyPath:'id'});}}
主鍵（key）是默認建立索引的屬性。比如，數(shù)據(jù)記錄是{ id: 1, name: '張三' }，那么id屬性可以作為主鍵。主鍵也可以指定為下一層對象的屬性，比如{ foo: { bar: 'baz' } }的foo.bar也可以指定為主鍵。
如果數(shù)據(jù)記錄里面沒有合適作為主鍵的屬性，那么可以讓 IndexedDB 自動生成主鍵。
varobjectStore=db.createObjectStore('person',{autoIncrement:true});
上面代碼中，指定主鍵為一個遞增的整數(shù)。
新建對象倉庫以后，下一步可以新建索引。
request.onupgradeneeded=function(event){db=event.target.result;varobjectStore=db.createObjectStore('person',{keyPath:'id'});objectStore.createIndex('name','name',{unique:false});objectStore.createIndex('email','email',{unique:true});}
上面代碼中，IDBObject.createIndex()的三個參數(shù)分別為索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重復的值）。
3.3 新增數(shù)據(jù)
新增數(shù)據(jù)指的是向?qū)ο髠}庫寫入數(shù)據(jù)記錄。這需要通過事務完成。
functionadd(){varrequest=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ù)需要新建一個事務。新建時必須指定表格名稱和操作模式（"只讀"或"讀寫"）。新建事務以后，通過IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 對象，再通過表格對象的add()方法，向表格寫入一條記錄。
寫入操作是一個異步操作，通過監(jiān)聽連接對象的success事件和error事件，了解是否寫入成功。
3.4 讀取數(shù)據(jù)
讀取數(shù)據(jù)也是通過事務完成。
functionread(){vartransaction=db.transaction(['person']);varobjectStore=transaction.objectStore('person');varrequest=objectStore.get(1);request.onerror=function(event){console.log('事務失敗');};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ù)是主鍵的值。
3.5 遍歷數(shù)據(jù)
遍歷數(shù)據(jù)表格的所有記錄，要使用指針對象 IDBCursor。
functionreadAll(){varobjectStore=db.transaction('person').objectStore('person');objectStore.openCursor().onsuccess=function(event){varcursor=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('沒有更多數(shù)據(jù)了！');}};}readAll();
上面代碼中，新建指針對象的openCursor()方法是一個異步操作，所以要監(jiān)聽success事件。
3.6 更新數(shù)據(jù)
更新數(shù)據(jù)要使用IDBObject.put()方法。
functionupdate(){varrequest=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()方法自動更新了主鍵為1的記錄。
3.7 刪除數(shù)據(jù)
IDBObjectStore.delete()方法用于刪除記錄。
functionremove(){varrequest=db.transaction(['person'],'readwrite').objectStore('person').delete(1);request.onsuccess=function(event){console.log('數(shù)據(jù)刪除成功');};}remove();
3.8 使用索引
索引的意義在于，可以讓你搜索任意字段，也就是說從任意字段拿到數(shù)據(jù)記錄。如果不建立索引，默認只能搜索主鍵（即從主鍵取值）。
假定新建表格的時候，對name字段建立了索引。
objectStore.createIndex('name','name',{unique:false});
現(xiàn)在，就可以從name找到對應的數(shù)據(jù)記錄了。
vartransaction=db.transaction(['person'],'readonly');varstore=transaction.objectStore('person');varindex=store.index('name');varrequest=index.get('李四');request.onsuccess=function(e){varresult=e.target.result;if(result){ // ...}else{ // ...}}
（完）
文檔信息
版權聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
發(fā)表日期：?2018年7月 4日
相關文章
2020.01.26:?Deno 運行時入門教程：Node.js 的替代品
這幾天假期，我學習了一下 Deno。它是 Node.js 的替代品。有了它，將來可能就不需要 Node.js 了。
2019.09.01:?React Hooks 入門教程
React 是主流的前端框架，v16.8 版本引入了全新的 API，叫做 React Hooks，顛覆了以前的用法。
2019.08.06:?Web Components 入門實例教程
組件是前端的發(fā)展方向，現(xiàn)在流行的 React 和 Vue 都是組件框架。
2019.04.15:?如何用網(wǎng)頁腳本追蹤用戶
本文介紹如何編寫 JavaScript 腳本，將用戶數(shù)據(jù)發(fā)回服務器。
留言（40條）
zx?說：
兼容性怎么樣
JS?說：
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
yqzhang?說：
我想請教一下本地數(shù)據(jù)庫的應用場景有哪些？
lovemegowin?說：
同求應用場景
ixx?說：
瀏覽器兼容：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API#Browser_compatibility
路過?說：
各種清理軟件用戶分鐘就清理了
魚魚青年lc?說：
在開發(fā)的時候用于取代mock服務？還有在tob場景下緩存大批量數(shù)據(jù)減少服務器壓力么
我要說?說：
應該還是做一些緩存而已 只不過提供一些結構化的方式 優(yōu)于localStorage 罷了
鐵錨?說：
感謝！ 淺顯易懂。
優(yōu)惠券?說：
引用路過的發(fā)言：
各種清理軟件用戶分鐘就清理了
說的真是廢話，你怎么不說用戶分分鐘就把系統(tǒng)重裝了呢
天地仁一?說：
如何防止IndexDB被用戶修改呢?
123?說：
一峰 ，你的es6 入門網(wǎng)站掛掉了，速度續(xù)費啊，大佬
mall?說：
用戶換個電腦訪問，DB的數(shù)據(jù)怎么辦
6?說：
簡單易懂！
xianxiaobo?說：
催更
Magic?說：
坐等每周分享12
shawn?說：
IndexedDB 早在去年就引起重視，一直使用“l(fā)ocalforage”，這個庫來操作本地存儲，大家也可以試一試，兼容不錯
Youthink?說：
瀏覽器兼容性，可以在這里看?https://caniuse.com/#search=IndexedDB
wfwf?說：
這樣的話，是不是用來開發(fā)移動app更好了，有了本地存儲
nick?說：
引用mall的發(fā)言：
用戶換個電腦訪問，DB的數(shù)據(jù)怎么辦
這個問題還用問嗎，要是沒有保存到服務器數(shù)據(jù)肯定沒了。呀，這只是做一些數(shù)據(jù)緩存而已。文章開頭都已經(jīng)說明了它的用途了。
Mikcal?說：
本地存儲的的話，它的安全性怎么樣??？或者說它的應用場景有哪些呢？存儲一些無關緊要的數(shù)據(jù)？
zzp?說：
對于頁游開發(fā)者,應該很有用
xl?說：
請教大神 那是不是只要統(tǒng)一管理 這個indexedDB 可以替代 redux
oldfu?說：
我也想了解下應用場景
張老漢?說：
區(qū)塊鏈項目，服務端只存儲加密字符串：客戶端(electron)需要下載大量的加密數(shù)據(jù)，然后批量解密，并且提供排序和數(shù)據(jù)流轉(zhuǎn)。所以前端沒數(shù)據(jù)庫是不行的。
arh?說：
老師 能詳細講下 版本 嗎 ？ 它如何影響數(shù)據(jù)增刪改查的？
楊龍飛?說：
引用mall的發(fā)言：
用戶換個電腦訪問，DB的數(shù)據(jù)怎么辦
原始數(shù)據(jù)是從庫里面請求的，然后放到本地indexdb里，之后的
操作都可以走本地了，本地的indexDB只是服務器db的一個緩存
ilvseyinfu?說：
阮老師寫的好吶，通俗易懂，這是我根據(jù)教程寫的一個通訊錄的項目https://github.com/ilvseyinfu/AddressBook
STAR?說：
很好的入門。正要做一個基于本地的東西
桐花?說：
一個web應用，不需要服務器的那種。比如單機游戲，比如個體店的出納。
最多的我覺得還是移動端做數(shù)據(jù)緩存
聰聰?說：
關系型數(shù)據(jù)庫中表的每一行本來就叫記錄
vito?說：
想給某個對象存儲新增一個字段怎么做？升級數(shù)據(jù)庫后不能創(chuàng)建這個表，報已經(jīng)存在
橙續(xù)緣?說：
請問可以轉(zhuǎn)載阮老師的這篇文章嗎，自當聲明出處。
微wx笑?說：
好奇怪的用法，先調(diào)用了indexedDB.open觸發(fā)事件，然后再綁定回調(diào)函數(shù)。
silas?說：
最后一個用索引查的例子，有關鍵部分漏了，我這里補充下
getByIndex: async function (table, keyValue, indexCursor) {
try {
let db = await this.openDB();
let store = db
.transaction(table.name, 'readonly')
.objectStore(table.name);
let keyRng = IDBKeyRange.only(keyValue);
let request = store.index(indexCursor).openCursor(keyRng);
let data = [];
return new Promise(resolve => {
request.onerror = function (event) {
reject(false);
};
request.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log(cursor.value);
data.push(cursor.value);
cursor.continue();
}
};
resolve(data);
});
} catch (error) {
return Promise.reject(false);
}
}
