摘要：設置為參數設置指定索引，并確保唯一性上面主要做了件事打開數據庫表新建，并設置設置打開數據庫表主要就是版本號和名字，沒有太多講的，我們直接從創建開始吧。打開注意事項檢查是否支持版本更新在生成一個實例時，需要手動指定一個版本號。

在知乎和我在平常工作中，常常會看到一個問題：

前端現在還火嗎？

這個我只想說：

隔岸觀火的人永遠無法明白起火的原因，只有置身風暴，才能找到風眼之所在 ——『秦時明月』

你 TM 看都不看前端現在的發展，怎么去評判前端火不火，我該不該嘗試一下其他方面的內容呢？本人為啥為這么熱衷于新的技術呢？主要原因在于，生怕會被某一項顛覆性的內容淘汰掉，從前沿領域掉隊下來。說句人話就是：窮，所以只能學了...。所以本文會從頭剖析一下 IndexedDB 在前端里面的應用的發展。

indexedDB 目前在前端慢慢得到普及和應用。它正朝著前端離線數據庫技術的步伐前進。以前一開始是 manifest、localStorage、cookie 再到 webSQL，現在 indexedDB 逐漸被各大瀏覽器認可。我們也可以針對它來進行技術上創新的開發。比如，現在小視頻非常流行，那么我們可以在用戶觀看時，通過 cacheStorage 緩存，然后利用 WebRTC 技術實現 P2P 分發的控制，不過需要注意，一定要合理利用大小，不然后果真的很嚴重。

indexedDB 的整體架構，是由一系列多帶帶的概念串聯而成，全部概念如下列表。一眼看去會發現沒有任何邏輯，不過，這里我順手畫了一幅邏輯圖，中間會根據 函數 的調用而相互串聯起來。

IDBRequest

IDBFactory

IDBDatabase

IDBObjectStore

IDBIndex

IDBKeyRange

IDBCursor

IDBTransaction

整體邏輯圖如下：

下文主要介紹了 indexedDB 的基本概念，以及在實際應用中的實操代碼。

indexedDB 基礎概念。在 indexedDB 里面會根據索引 index 來進行整體數據結構的劃分。

indexedDB 數據庫的更新是一個非常蛋疼的事情，因為，Web 的靈活性，你既需要做好向上版本的更新，也需要完善向下版本的容錯性。

indexedDB 高效索引機制，在內部，indexedDB 已經提供了 index、cursor等高效的索引機制，推薦不要直接將所有數據都取回來，再進行篩選，而是直接利用 cursor 進行。

最后推薦幾個常用庫

IndexedDB 可以存儲非常多的數據，比如 Object,files,blobs 等，里面的存儲結構是根據 Database 來進行存儲的。每個 DB 里面可以有不同的 object stores。具體結構如下圖：

并且，我們可以給 key 設定相關特定的值，然后在索引的時候，可以直接通過 key 得到具體的內容。使用 IndexDB 需要注意，其遵循的是同域原則。

在 indexDB 中，有幾個基本的操作對象：

Database: 通過 open 方法直接打開，可以得到一個實例的 DB。每個頁面可以創建多個 DB，不過一般都是一個。

idb.open(name, version, upgradeCallback)

Object store: 這個就是 DB 里面具體存儲的對象。這個可以對應于 SQL 里面的 table 內容。其存儲的結構為：

index: 有點類似于外鏈，它本身是一種 Object store，主要是用來在本體的 store 中，索引另外 object store 里面的數據。需要區別的是，key 和 index 是不一樣的。可以參考： index DEMO，mdn index。如下圖表示：

如下 code 為：

// 創建 index
var myIndex = objectStore.index("lName"); 

transaction: 事務其實就是一系列 CRUD 的集合內容。如果其中一個環節失敗了，那么整個事務的處理都會被取消。例如：

var trans1 = db.transaction("foo", "readwrite");
var trans2 = db.transaction("foo", "readwrite");
var objectStore2 = trans2.objectStore("foo")
var objectStore1 = trans1.objectStore("foo")
objectStore2.put("2", "key");
objectStore1.put("1", "key");

cursor: 主要是用來遍歷 DB 里面的數據內容。主要是通過 openCursor 來進行控制。

function displayData() {
  var transaction = db.transaction(["rushAlbumList"], "readonly");
  var objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if(cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML = cursor.value.albumTitle + ", " + cursor.value.year;
      list.appendChild(listItem);  

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}

上面說了幾個基本的概念。那接下來我們實踐一下 IndexDB。實際上入門 IndexDB 就是做幾個基本的內容

打開數據庫表

設置指定的 primary Key

定義好索引的 index

前期搭建一個 IndexedDB 很簡單的代碼如下：

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // 錯誤處理程序在這里。
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  // 設置 id 為 primaryKey 參數
  var objectStore = db.createObjectStore("customers", { keyPath: "id",{autoIncrement:true} });
  
  // 設置指定索引，并確保唯一性
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("email", "email", { unique: true });

};

上面主要做了 3 件事：

打開數據庫表

新建 Store，并設置 primary Key

設置 index

打開數據庫表主要就是版本號和名字，沒有太多講的，我們直接從創建 store 開始吧。

使用的方法就是 IDBDatabase 上的 createObjectStore 方法。

var objectStore = db.createObjectStore("customers", { keyPath: "id",{autoIncrement:true} });

基本函數構造為：

IDBObjectStore createObjectStore(DOMString name,
                                               optional IDBObjectStoreParameters options)
                                               
dictionary IDBObjectStoreParameters {
  (DOMString or sequence)? keyPath = null;
  boolean autoIncrement = false;
};

keyPath: 用來設置主鍵的 key，具體區別可以參考下面的 keyPath 和 generator 的區別。

autoIncrement: 是否使用自增 key 的特性。

創建的 key 主要是為了保證，在數據插入時唯一性的標識。

不過，往往一個主鍵(key)，是沒辦法很好的完成索引，在具體實踐時，就還需要輔鍵 (aid-key) 來完成輔助索引工作，這個在 IndexDB 就映射為 index。

在完成 PK(Primary key) 創建完畢后，為了更好的搜索性能我們還需要額外創建 index。這里可以直接使用：

objectStore.createIndex("indexName", "property", options);

indexName: 設置當前 index 的名字

property: 從存儲數據中，指明 index 所指的屬性。

其中，options 有三個選項：

unique: 當前 key 是否能重復 (最常用)

multiEntry: 設置當前的 property 為數組時，會給數組里面每個元素都設置一個 index 值。

# 創建一個名字叫 titleIndex 的 index，并且存儲的 index 不能重復
DB.createIndex("titleIndex", "title", {unique: false});

具體可以參考：MDN createIndex Prop 和 googleDeveloper Index。

在 IndexedDB 里面進行數據的增刪，都需要在 transaction 中完成。而這個增刪數據，大家可以理解為一次 request，相當于在一個 transaction 里面管理所有當前邏輯操作的 request。所以，在正式開始進行數據操作之前，還需要給大家簡單介紹一些如果創建一個事務。

transaction API，如下 [代碼1]。在創建時，你需要手動指定當前 transaction 是那種類型的操作，基本的內容有：

"readonly"：只讀

"readwrite"：讀寫

"versionchange"：這個不能手動指定，會在 upgradeneeded 回調事件里面自動創建。它可以用來修改現有 object store 的結構數據，比如 index 等。

你可以通過在數據庫打開之后，通過 IDBDataBase 上的 transaction 方法創建，如 [代碼2]。

[代碼1]
  [NewObject] IDBTransaction transaction((DOMString or sequence) storeNames,
                                         optional IDBTransactionMode mode = "readonly");
                                         
[代碼2]
var transaction = db.transaction(["customers"], "readwrite");
var objectStore = transaction.objectStore("customers");
# 遍歷存儲數據
for (var i in customerData) {
  var request = objectStore.add(customerData[i]);
  request.onsuccess = function(event) {
    // success, done?
  };
}

事務在創建的時候不僅僅可以制定執行的模式，還可以指定本次事務能夠影響的 ObjectStore 范圍，具體細節就是在第一個 transaction 參數里面傳入的是一個數據，然后通過 objectStore() 方法打開多個 OS 進行操作，如下 [代碼3]。

[代碼3]
var tx = db.transaction(["books","person"], "readonly");
var books = tx.objectStore("books");
var person = tx.objectStore("person");

完成了事務的創建之后，我們就可以正式的開始進行數據的交互操作了，也就是寫我們具體的業務邏輯。如下 [代碼1]，一個完整數據事務的操作。

[代碼1]
var tx = db.transaction("books", "readwrite");
var store = tx.objectStore("books");

store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});

tx.oncomplete = function() {
  // All requests have succeeded and the transaction has committed.
};

通過 objectStore 回調得到的 IDBObjectStore 對象，我們就可以進行一些列的增刪查改操作了。可以參考 [代碼2]。詳細的可以參考文末的 appendix。

[代碼2]
  [NewObject] IDBRequest put(any value, optional any key);
  [NewObject] IDBRequest add(any value, optional any key);
  [NewObject] IDBRequest delete(any query);

索引數據是所有數據庫里面最重要的一個。這里，我們可以使用游標，index 來做。例如，通過 index 來快速索引 key 值，參考 [代碼1]。

[代碼1]
var index = objectStore.index("name");
index.get("Donna").onsuccess = function(event) {
  alert("Donna"s SSN is " + event.target.result.ssn);
};

更詳細的內容，可以參考下文 數據索引方式。

何謂 keyPath 和 keyGenerator 應該算是 IndexedDB 里面比較難以理解的概念。簡單來說，IndexedDB 在創建 Store 的時候，必須保證里面的數據是唯一的，那么得需要像其它數據庫一樣設置一個 primary Key 來區分不同數據。而 keyPath 和 Generator 就是兩種不同的設置 key 的方式。

設置 keyPath

# 設置預先需要存放的數據

const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];

# 通過 keyPath 設置 Primary Key
var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

因為 ssn 在該數據集是唯一的，所以，我們可以利用它來作為 keyPath 保證 unique 的特性。或者，可以設置為自增的鍵值，比如 id++ 類似的。

upgradeDb.createObjectStore("logs", {keyPath: "id", autoIncrement:true});

使用 generator

generator 會每次在添加數據時，自動創建一個 unique value。這個 unique value 是和你的實際數據是分開的。里面直接通過 autoIncrement:true 來設置即可。

upgradeDb.createObjectStore("notes", {autoIncrement:true});

檢查是否支持 indexDB

if (!("indexedDB" in window)) {
  console.log("This browser doesn"t support IndexedDB");
  return;
}

版本更新: indexDB

在生成一個 indexDB 實例時，需要手動指定一個版本號。而最常用的

idb.open("test-db7", 2, function(upgradeDb) {})

這樣會造成一個問題，比如上線過程中，用戶A第一次請求返回了新版本的網頁，連接了版本2。之后又刷新網頁命中了另一臺未上線的機器，連接了舊版本1 出錯。主要原因是：

indexedDB API 中不允許數據庫中的數據倉庫在同一版本中發生變化. 并且當前 DB 版本不能和低版本的 version 連接。

比如，你一開始定義的 DB 版本內容為：

# 版本一定義的內容
db.version(1).stores({friends: "++id,name"});

# 版本二修改結構為：
db.version(2).stores({friends: "++id,name,shoeSize"});

如果此時，用戶先打開了 version(1)，但是后面，又得到的是 version(2) 版本的 HTML，這時就會出現 error 的錯誤。

參考:

版本更替

這個在 IndexDB 是一個很重要的問題。主要原因在于

indexedDB API 中不允許數據庫中的數據倉庫在同一版本中發生變化. 并且當前 DB 版本不能和低版本的 version 連接。

上面就可以抽象為一個問題：

你什么情況下需要更新 IndexDB 的版本呢?

該表數據庫里面的 keyPath 時。

你需要重新設計數據庫表結構時，比如新增 index

# 版本 1 的 DB 設計，有一個主鍵 id 和 index-name
db
.version(1)
.stores({friends: "++id,name"})

# 如果直接想新增一個 key，例如 male，是無法成功的
db
.version(1)
.stores({friends: "++id,name,male"})

# 正確辦法是直接修改版本號更新
db
.version(2)
.stores({friends: "++id,name,male"})

不過，如果直接修改版本號，會出現這樣一個 case:

由于原始 HTML 更新問題，用戶首先訪問的是版本 1 的 A 頁面，然后，訪問更新過后的 B 頁面。這時，IndexDB 成功更新為高版本。但是，用戶下次又命中了老版本的 A 頁面，此時 A 中還是連接低版本的 IndexDB ,就會報錯，導致你訪問失敗。

解決辦法就是，設置過濾，在 open 的時候，手動傳入版本號：

# 打開版本 1 的數據庫
var dbPromise = idb.open("db1", 1, function(upgradeDb){...})

# 打開版本 2 的數據庫
var dbPromise = idb.open("db2", 2, function(upgradeDb){...})

不過，這樣又會造成另外一個問題，即，數據遷移（老版本數據，不可能不要吧）。這里，IndexDB 會有一個 updateCallback 給你觸發，你可以直接在里面做相關的數據遷移處理。

var dbPromise = idb.open("test-db7", 2, function(upgradeDb) {
  switch (upgradeDb.oldVersion) {
    case 0:
      upgradeDb.createObjectStore("store", {keyPath: "name"});
    case 1:
      var peopleStore = upgradeDb.transaction.objectStore("store");
      peopleStore.createIndex("price", "price");
  }
});

在使用的時候，一定要注意 DB 版本的升級處理，比如有這樣一個 case，你的版本已經是 3，不過，你需要處理版本二的數據:

# 將版本二 中的 name 拆分為  firstName 和 lastName
db.version(3).stores({friends: "++id,shoeSize,firstName,lastName"}).upgrade(function(t) {
    
    return t.friends.toCollection().modify(function(friend) {
        // Modify each friend:
        friend.firstName = friend.name.split(" ")[0];
        friend.lastName = friend.name.split(" ")[1];
        delete friend.name;
    });
});

對于存在版本 2 數據庫的用戶來說是 OK 的，但是對于某些還沒有訪問過你數據庫的用戶來說，這無疑就報錯了。解決辦法有：

保留每個版本時，創建的字段和 stores

在更新 callback 里面，對處理的數據判斷是否存在即可。

在 Dexie.js DB 數據庫中，需要你保留每次 DB 創建的方法，實際上是通過 添加 swtich case ，來完成每個版本的更新：

# Dexie.js 保留 DB 數據庫
db.version(1).stores({friends: "++id,name"});
db.version(2).stores({friends: "++id,name,shoeSize"});
db.version(3).stores({friends: "++id,shoeSize,firstName,lastName"}).upgrade(...)

# 內部原理，直接添加 switch case 完成版本更新
var dbPromise = idb.open("test-db7", 2, function(upgradeDb) {
  switch (upgradeDb.oldVersion) {
    case 0:
      upgradeDb.createObjectStore("store", {keyPath: "name"});
    case 1:
      var peopleStore = upgradeDb.transaction.objectStore("store");
      peopleStore.createIndex("price", "price");
  }
});

如果遇到一個頁面打開，但是另外一個頁面拉取到新的代碼進行更新時，這個時候還需要將低版本 indexedDB 進行顯式的關閉。具體操作辦法就是監聽 onversionchange 事件，當版本升級時，通知當前 DB 進行關閉，然后在新的頁面進行更新操作。

openReq.onupgradeneeded = function(event) {
  // 所有其它數據庫都已經被關掉了，直接更新代碼
  db.createObjectStore(/* ... */);
  db.onversionchange = function(event) {
    db.close();
  };

}  
  

最后，更新是還有幾個注意事項：

版本更新不能改變 primary key

回退代碼時，千萬注意版本是否已經更新。否則，只能增量更新，重新修改版本號來修復。

有時候，我們存儲時，想得到一個由一串 String 生成的 hash key，那在 Web 上應該如何實現呢？

這里可以直接利用 Web 上已經實現的 WebCrypto，為了實現上述需求，我們可以直接利用里面的 digest 方法即可。這里 MDN 上，已經有現成的辦法，我們直接使用即可。

參考：

WebCrypto 加密手段

基本限制為：

逐出策略為:

參考：

存儲上限值
瀏覽器內核存儲上限值處理

在數據庫中除了基本的 CRUD 外，一個高效的索引架構，則是里面的重中之重。在 indexedDB 中，我們一共可以通過三種方式來索引數據：

固定的 key 值

索引外鍵（index）

游標（cursor）

IDBObjectStore 提供給了我們直接通過 primaryKey 來索引數據，參考 [代碼1]，這種方式需要我們一開始就知道目標的 key 內容。當然，也可以通過 getAll 全部索引數據。

[代碼1]
  [NewObject] IDBRequest get(any query);
  [NewObject] IDBRequest getKey(any query);
  [NewObject] IDBRequest getAll(optional any query,
                                optional [EnforceRange] unsigned long count);
  [NewObject] IDBRequest getAllKeys(optional any query,
                                    optional [EnforceRange] unsigned long count);

比如，我們通過 primaryKey 得到一條具體的數據：

db.transaction("customers").objectStore("customers").get("id_card_1118899").onsuccess = function(event) {
    // data is event.target.result.name
};

也可以 fetch 整個 Object Store 的數據。這些場景用處比較少，這里就不過多講解。我們主要來了解一下 index 的索引方式。

如果想要查詢某個數據，直接通過整個對象來進行遍歷的話，這樣做性能耗時是非常大的。如果我們結合 index 來將 key 加以分類，就可以很快速的實現指定數據的索引。這里，我們可以直接利用 IDBObjectStore 上面的 index() 方法來獲取指定 index 的值，具體方法可以參考 [代碼1]。

[代碼1]
 IDBIndex index(DOMString name);

該方法會直接返回一個 IDBIndex 對象。這你也可以理解為一個類似 ObjectStore 的微型 index 數據內容。接著，我們可以使用 get() 方法來獲得指定 index 的數據，參考[代碼2]。

[代碼2]
var index = objectStore.index("name");
index.get("Donna").onsuccess = function(event) {
  alert("Donna"s SSN is " + event.target.result.ssn);
};

使用 get 方法不管你的 index 是否是 unique 的都會只會返回第一個數據。如果想得到多個數據的話，可以使用 getAll(key) 來做。通過 getAll() 得到的回調函數，直接通過 event.target.result 可以得到對應的 value 內容。

objectStore.getAll().onsuccess = function(event) {
      printf(event.target.result); // Array
    };

除了通過 getAll() 得到所有數據外，還可以采用更高效的 cursor 方法遍歷得到的數據。

參考：

getAll() 和 openCursor 實例

所謂的游標，大家心里應該可以有一個初步的印象，就像我們物理尺子上的那個東西，可以自由的移動，來標識指向的對象內容。cursor 里面有兩個核心的方法：

advance(count): 將當前游標位置向前移動 count 位置

continue(key): 將當前游標位置移動到指定 key 的位置，如果沒提供 key 則代表的移動下一個位置。

比如，我們使用 cursor 來遍歷 Object Store 的具體數據。

objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if(cursor) {
        // cursor.key 
        // cursor.value
      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };

通常，游標可以用來遍歷兩個類型的數據，一個是 ObjectStore、一個是 Index。

Object.store: 如果在該對象上使用游標，那么會根據 primaryKey 遍歷整個數據，注意，這里不會存在重復的情況，因為 primaryKey 是唯一的。

index: 在 index 上使用游標的話，會以當前的 index 來進行遍歷，其中可能會存在重復的現象。

在 IDBObjectStore 對象上有兩種方法來打開游標：

openCursor: 遍歷的對象是 具體的數據值，最常用的方法

openKeyCursor: 遍歷的對象是 數據 key 值

這里，我們通過 openCursor 來直接打開一個 index 數據集，然后進行遍歷。

PersonIndex.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    customers.push(cursor.value);
    cursor.continue();
  }
  else {
    alert("Got all customers: " + customers);
  }
};

在游標中，還提供給了一個 update 和 delete 方法，我們可以用它來進行數據的更新操作，否則的話就直接使用 ObjectStore 提供的 put 方法。

游標里面我們還可以限定其遍歷的范圍和方向。這個設置是我們直接在 openCursor() 方法里面傳參完成的，該方法的構造函數參考 [代碼1]。他里面可以傳入兩個參數，第一個用來指定范圍，第二個用來指定 cursor 移動的方向。

[代碼1]
IDBRequest openCursor(optional any query,
                                    optional IDBCursorDirection direction = "next");

如果需要對 cursor 設置范圍的話，就需要使用到 IDBKeyRange 這個對象，使用樣板可以參考 [代碼2]。IDBKeyRange 里面 key 參考的對象 因使用者的不同而不同。如果是針對 ObjectStore 的話，則是針對 primaryKey，如果是針對 Index 的話，則是針對當前的 indexKey

/ 匹配所有在 “Bill” 前面的, 但是不需要包括 "Bill"
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);

比如，我們這里對 PersonIndex 設置一個 index 范圍，即，索引 在 villainhr 和 jimmyVV 之間的數據集合。

# 都包括 villainhr 和 jimmyVV 的數據
var boundKeyRange = IDBKeyRange.bound("villainhr", "jimmyVV", true, true);

 PersonIndex.openCursor(boundKeyRange).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the matches.
    cursor.continue();
  }
};

如果你還想設置遍歷的方向和是否排除重復數據，還可以根據 [代碼2] 的枚舉類型來設置。比如，在 [代碼3] 中，我們改變默認的 cursor 遍歷數據的方向為 prev，從末尾開始。

[代碼2]
enum IDBCursorDirection {
  "next",
  "nextunique",
  "prev",
  "prevunique"
};

[代碼3]
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.value 
    cursor.continue();
  }
};

在 indexDB 里面的讀寫全部是基于 transaction 模式來的。也就是 IDBDataBase 里面的 transaction 方法，如下 [代碼1]。所有的讀寫都可以比作在 transaction 作用域下的請求，只有當所有請求完成之后，該次 transaction 才會生效，否則就會拋出異常或者錯誤。transaction 會根據監聽 error，abort，以及 complete 三個事件來完成整個事務的流程管理，參考[代碼2]。

[代碼1]
  [NewObject] IDBTransaction transaction((DOMString or sequence) storeNames,
                                         optional IDBTransactionMode mode = "readonly");

[代碼2]
  attribute EventHandler onabort;
  attribute EventHandler oncomplete;
  attribute EventHandler onerror;

例如：

var request = db.transaction(["customers"], "readwrite")
                .objectStore("customers")
                .delete("gg");
request.onsuccess = function(event) {
  // delete, done
};

你可以在 transaction 方法里面手動傳入 readwrite 或者其他表示事務的 readonly 參數，來表示本次事務你會進行如何的操作。IndexedDB 在初始設計時，就已經決定了它的性能問題。

只含有 readonly 模式的 transaction 可以并發進行執行
含有 write 模式的 transaction 必須按照隊列 來 執行

這就意味著，如果你使用了 readwrite 模式的話，那么后續不管是不是 readonly 都必須等待該次 transaction 完成才行。

指定 primaryKey 生成時，是通過 createObjectStore 方法來操作的。有時候，我們會遇到想直接得到一個 key，并且存在于當前數據集中，可以在 options 中同時加上 keyPath 和 autoIncrement 屬性。該 key 的范圍是 [1- $ 2^{53} $]，參考 keygenerator key 的大小

db.createObjectStore("table1", {keyPath: "id", autoIncrement: true});

閱讀推薦

indexedDB W3C 文檔
indexedDB 入門
MDN indexedDB 入門

好用庫推薦

idb: 一個 promise 的 DB 庫

IndexedDB 數據庫使用key-value鍵值對儲存數據.你可以對對象的某個屬性創建索引（index）以實現快速查詢和列舉排序。.key可以使二進制對象

IndexedDB 是事務模式的數據庫. IndexedDB API提供了索引(indexes), 表(tables), 指針(cursors)等等, 但是所有這些必須是依賴于某種事務的。

The IndexedDB API 基本上是異步的.

IndexedDB 數據庫的請求都會包含 onsuccess和onerror事件屬性。

IndexedDB 在結果準備好之后通過DOM事件通知用戶

IndexedDB是面向對象的。indexedDB不是用二維表來表示集合的關系型數據庫。這一點非常重要，將影響你設計和建立你的應用程序。

indexedDB不使用結構化查詢語言（SQL）。它通過索引(index)所產生的指針(cursor)來完成查詢操作，從而使你可以迭代遍歷到結果集合。

IndexedDB遵循同源（same-origin）策略

全球多種語言混合存儲。國際化支持不好。需要自己處理。

和服務器端數據庫同步。你得自己寫同步代碼。

全文搜索。

在以下情況下，數據庫可能被清除:

用戶請求清除數據。

瀏覽器處于隱私模式。最后退出瀏覽器的時候，數據會被清除。

硬盤等存儲設備的容量到限。

不正確的

不完整的改變.

數據庫

數據庫: 通常包含一個或多個 object stores. 每個數據庫必須包含以下內容：

名字(Name)： 它標識了一個特定源中的數據庫，并且在數據庫的整個生命周期內保持不變. 此名字可以為任意字符串值（包括空字符串）.

當前版本(version). 當一個數據庫首次創建時，它的 version 為1，除非另外指定. 每個數據庫在任意時刻只能有一個 version

對象存儲(object store): 用來承載數據的一個分區.數據以鍵值對形式被對象存儲永久持有。在 OS 中，創建一個 key 可以使用 key generator 和 key path。

key generator: 簡單來說就是在存儲數據時，主動生成一個 id++ 來區分每條記錄。這種情況下 存儲數據的 key 是和 value 分開進行存儲的，也就是 （out of line）。

key path: 需要用戶主動來設置儲存數據的 key 內容，

request: 每次讀寫操作，可以當做一次 request.

transaction: 一系列讀寫請求的集合。

index: 一個特殊的 Object Store，用來索引另外一個 Store 的數據。

具體數據 key/value

key: 這個 key 的值，可以通過三種方式生成。 a key generator, a key path, 用戶指定的值。并且，這個 key 在當前的 Object Store 是唯一的。一個 key 類型可以是 string, date, float, and array 類型。不過，在老版本的時候，一般只支持 string or integer。（現在，版本應該都 OK 了）

- key generator: 相當于以一種 `id++` 的形式來生成一個 key 值。
- key path: 當前指定的 key 可以根據 value 里面的內容來指定。里面可以為一些分隔符。
- 指定的 key：這個就是需要用戶手動來指定生成。

value: 可以存儲 boolean, number, string, date, object, array, regexp, undefined, and null。現在還可以存儲 files and blob 對象。

操作作用域

scope：這可以比作 transaction 的作用域，即，一系列 transaction 執行的順序。該規定，多個 reading transaction 能夠同時執行。但是 writing 則只能排隊進行。

key range: 用來設置取出數據的 key 的范圍內容。

參考：

原生概念 IndexedDB

這其實就是 indexDB 上面掛載的對象。主要 API 如下：

[Exposed=(Window,Worker)]
interface IDBFactory {
  [NewObject] IDBOpenDBRequest open(DOMString name,
                                    optional [EnforceRange] unsigned long long version);
  [NewObject] IDBOpenDBRequest deleteDatabase(DOMString name);

  short cmp(any first, any second);
};

你可以直接通過 open 來打開一個數據庫。通過 返回一個 Request 對象，來進行結果監聽的回調：

var request = indexedDB.open("AddressBook", 15);
request.onsuccess = function(evt) {...};
request.onerror = function(evt) {...};

參考：

IndexDB Factory API

當你通過 open 方法處理過后，就會得到一個 Request 回調對象。這個就是 IDBRequest 的實例。

[Exposed=(Window,Worker)]
interface IDBRequest : EventTarget {
  readonly attribute any result; // 通過 open 打開過后的 IDBObjectStore 實例 
  readonly attribute DOMException? error;
  readonly attribute (IDBObjectStore or IDBIndex or IDBCursor)? source;
  readonly attribute IDBTransaction? transaction;
  readonly attribute IDBRequestReadyState readyState;

  // Event handlers:
  attribute EventHandler onsuccess;
  attribute EventHandler onerror;
};

enum IDBRequestReadyState {
  "pending",
  "done"
};

[Exposed=(Window,Worker)]
interface IDBOpenDBRequest : IDBRequest {
  // Event handlers:
  attribute EventHandler onblocked;
  attribute EventHandler onupgradeneeded;
};

你可以通過 result 得到當前數據庫操作的結果。如果你打開更新后的版本號的話，還需要監聽 onupgradeneeded 事件來實現。最常通過 indexedDB.open 遇見的錯誤就是 VER_ERR 版本錯誤。這表明存儲在磁盤上的數據庫的版本高于你試圖打開的版本。

db.onerror = function(event) {
  // Generic error handler for all errors targeted at this database"s
  // requests!
  alert("Database error: " + event.target.errorCode);
};

所以，一般在創建 IndexDB 時，還需要管理它版本的更新操作，這里就需要監聽 onupgradeneeded 來是實現。

request.onupgradeneeded = function(event) { 
   // 更新對象存儲空間和索引 .... 
};

或者我們可以直接使用 idb 微型庫來實現讀取操作。

  var dbPromise = idb.open("test-db3", 1, function(upgradeDb) {
    if (!upgradeDb.objectStoreNames.contains("people")) {
      upgradeDb.createObjectStore("people", {keyPath: "email"});
    }
    if (!upgradeDb.objectStoreNames.contains("notes")) {
      upgradeDb.createObjectStore("notes", {autoIncrement: true});
    }
    if (!upgradeDb.objectStoreNames.contains("logs")) {
      upgradeDb.createObjectStore("logs", {keyPath: "id", autoIncrement: true});
    }
  });

其中通過 onupgradeneeded 回調得到的 event.result 就是 IDBDatabase 的實例，常常用來設置 index 和插入數據。參考下面內容。

參考：

IDBRequest API

該對象常常用來做 Object Store 和 transaction 的創建和刪除。該部分是 onupgradeneeded 事件獲得的 event.target.result 對象：

request.onupgradeneeded = function(event) { 
   // 更新對象存儲空間和索引 .... 
   // event.target.result 對象
};

具體 API 內容如下：

[Exposed=(Window,Worker)]
interface IDBDatabase : EventTarget {
  readonly attribute DOMString name;
  readonly attribute unsigned long long version;
  readonly attribute DOMStringList objectStoreNames;

  [NewObject] IDBTransaction transaction((DOMString or sequence) storeNames,
                                         optional IDBTransactionMode mode = "readonly");
  void close();

  [NewObject] IDBObjectStore createObjectStore(DOMString name,
                                               optional IDBObjectStoreParameters options);
  void deleteObjectStore(DOMString name);

  // Event handlers:
  attribute EventHandler onabort;
  attribute EventHandler onclose;
  attribute EventHandler onerror;
  attribute EventHandler onversionchange;
};

dictionary IDBObjectStoreParameters {
  (DOMString or sequence)? keyPath = null;
  boolean autoIncrement = false;
};

如果它通過 createObjectStore 方法，那么得到的就是一個 IDBObjectStore 實例對象。如果是 transaction 方法，那么就是 IDBTransaction 對象。

該對象一般是用來創建 index 和插入數據使用。

可以參考：

[Exposed=(Window,Worker)]
interface IDBObjectStore {
  attribute DOMString name;
  readonly attribute any keyPath;
  readonly attribute DOMStringList indexNames;
  [SameObject] readonly attribute IDBTransaction transaction;
  readonly attribute boolean autoIncrement;

  [NewObject] IDBRequest put(any value, optional any key);
  [NewObject] IDBRequest add(any value, optional any key);
  [NewObject] IDBRequest delete(any query);
  [NewObject] IDBRequest clear();
  [NewObject] IDBRequest get(any query);
  [NewObject] IDBRequest getKey(any query);
  [NewObject] IDBRequest getAll(optional any query,
                                optional [EnforceRange] unsigned long count);
  [NewObject] IDBRequest getAllKeys(optional any query,
                                    optional [EnforceRange] unsigned long count);
  [NewObject] IDBRequest count(optional any query);

  [NewObject] IDBRequest openCursor(optional any query,
                                    optional IDBCursorDirection direction = "next");
  [NewObject] IDBRequest openKeyCursor(optional any query,
                                       optional IDBCursorDirection direction = "next");

  IDBIndex index(DOMString name);

  [NewObject] IDBIndex createIndex(DOMString name,
                                   (DOMString or sequence) keyPath,
                                   optional IDBIndexParameters options);
  void deleteIndex(DOMString name);
};

dictionary IDBIndexParameters {
  boolean unique = false;
  boolean multiEntry = false;
};

該對象是用來進行 Index 索引的操作對象，里面也會存在 get 和 getAll 等方法。詳細內容如下：

[Exposed=(Window,Worker)]
interface IDBIndex {
  attribute DOMString name;
  [SameObject] readonly attribute IDBObjectStore objectStore;
  readonly attribute any keyPath;
  readonly attribute boolean multiEntry;
  readonly attribute boolean unique;

  [NewObject] IDBRequest get(any query);
  [NewObject] IDBRequest getKey(any query);
  [NewObject] IDBRequest getAll(optional any query,
                                optional [EnforceRange] unsigned long count);
  [NewObject] IDBRequest getAllKeys(optional any query,
                                    optional [EnforceRange] unsigned long count);
  [NewObject] IDBRequest count(optional any query);

  [NewObject] IDBRequest openCursor(optional any query,
                                    optional IDBCursorDirection direction = "next");
  [NewObject] IDBRequest openKeyCursor(optional any query,
                                       optional IDBCursorDirection direction = "next");
};

參考：

idb 開源庫，微型代碼庫
treo 開源庫
dexie.js 開源庫
indexeddb
原生概念 IndexedDB

也歡迎大家關注我的公眾號：前端小吉米 獲得一手的技術文章以及未來技術的發展內容。