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