正文

IndexedDB 是一個瀏覽器內(nèi)建的數(shù)據(jù)庫，它比 localStorage 強大得多。

• 通過支持多種類型的鍵，來存儲幾乎可以是任何類型的值。
• 支撐事務(wù)的可靠性。
• 支持鍵值范圍查詢、索引。
• 和 localStorage 相比，它可以存儲更大的數(shù)據(jù)量。

對于傳統(tǒng)的 客戶端-服務(wù)器 應(yīng)用，這些功能通常是沒有必要的。IndexedDB 適用于離線應(yīng)用，可與 ServiceWorkers 和其他技術(shù)相結(jié)合使用。

根據(jù)規(guī)范 www.w3.org/TR/IndexedD… 中的描述，IndexedDB 的本機接口是基于事件的。

我們還可以在基于 promise 的包裝器（wrapper），如 github.com/jakearchiba… 的幫助下使用 async/await。這要方便的多，但是包裝器并不完美，它并不能替代所有情況下的事件。因此，我們先練習事件（events），在理解了 IndexedDB 之后，我們將使用包裝器。

數(shù)據(jù)在哪兒？

從技術(shù)上講，數(shù)據(jù)通常與瀏覽器設(shè)置、擴展程序等一起存儲在訪問者的主目錄中。

不同的瀏覽器和操作系統(tǒng)級別的用戶都有各自獨立的存儲。

打開數(shù)據(jù)庫

要想使用 IndexedDB，首先需要 open（連接）一個數(shù)據(jù)庫。

語法：

let openRequest = indexedDB.open(name, version);

• name —— 字符串，即數(shù)據(jù)庫名稱。
• version —— 一個正整數(shù)版本，默認為 1（下面解釋）。

數(shù)據(jù)庫可以有許多不同的名稱，但是必須存在于當前的源（域/協(xié)議/端口）中。不同的網(wǎng)站不能相互訪問對方的數(shù)據(jù)庫。

調(diào)用之后會返回 openRequest 對象，我們需要監(jiān)聽該對象上的事件：

• success：數(shù)據(jù)庫準備就緒，openRequest.result 中有了一個數(shù)據(jù)庫對象“Database Object”，我們應(yīng)該將其用于進一步的調(diào)用。
• error：打開失敗。
• upgradeneeded：數(shù)據(jù)庫已準備就緒，但其版本已過時（見下文）。

IndexedDB 具有內(nèi)建的“模式（scheme）版本控制”機制，這在服務(wù)器端數(shù)據(jù)庫中是不存在的。

與服務(wù)器端數(shù)據(jù)庫不同，IndexedDB 存在于客戶端，數(shù)據(jù)存儲在瀏覽器中。因此，開發(fā)人員無法隨時都能訪問它。因此，當我們發(fā)布了新版本的應(yīng)用程序，用戶訪問我們的網(wǎng)頁，我們可能需要更新該數(shù)據(jù)庫。

如果本地數(shù)據(jù)庫版本低于 open 中指定的版本，會觸發(fā)一個特殊事件 upgradeneeded。我們可以根據(jù)需要比較版本并升級數(shù)據(jù)結(jié)構(gòu)。

當數(shù)據(jù)庫還不存在時（從技術(shù)上講，其版本為 0），也會觸發(fā) upgradeneeded 事件。因此，我們可以執(zhí)行初始化。

假設(shè)我們發(fā)布了應(yīng)用程序的第一個版本。

接下來我們就可以打開版本 1 中的 IndexedDB 數(shù)據(jù)庫，并在一個 upgradeneeded 的處理程序中執(zhí)行初始化，如下所示：

let openRequest = indexedDB.open("store", 1);
openRequest.onupgradeneeded = function() {
  // 如果客戶端沒有數(shù)據(jù)庫則觸發(fā)
  // ...執(zhí)行初始化...
};
openRequest.onerror = function() {
  console.error("Error", openRequest.error);
};
openRequest.onsuccess = function() {
  let db = openRequest.result;
  // 繼續(xù)使用 db 對象處理數(shù)據(jù)庫
};

之后不久，我們發(fā)布了第二個版本。

我們可以打開版本 2 中的 IndexedDB 數(shù)據(jù)庫，并像這樣進行升級：

let openRequest = indexedDB.open("store", 2);
openRequest.onupgradeneeded = function(event) {
  // 現(xiàn)有的數(shù)據(jù)庫版本小于 2（或不存在）
  let db = openRequest.result;
  switch(event.oldVersion) { // 現(xiàn)有的 db 版本
    case 0:
      // 版本 0 表示客戶端沒有數(shù)據(jù)庫
      // 執(zhí)行初始化
    case 1:
      // 客戶端版本為 1
      // 更新
  }
};

請注意：雖然我們目前的版本是 2，onupgradeneeded 處理程序有針對版本 0 的代碼分支（適用于初次訪問，瀏覽器中沒有數(shù)據(jù)庫的用戶）和針對版本 1 的代碼分支（用于升級）。

接下來，當且僅當 onupgradeneeded 處理程序沒有錯誤地執(zhí)行完成，openRequest.onsuccess 被觸發(fā)，數(shù)據(jù)庫才算是成功打開了。

刪除數(shù)據(jù)庫：

let deleteRequest = indexedDB.deleteDatabase(name)
// deleteRequest.onsuccess/onerror 追蹤（tracks）結(jié)果

我們無法使用較舊的 open 調(diào)用版本打開數(shù)據(jù)庫

如果當前用戶的數(shù)據(jù)庫版本比 open 調(diào)用的版本更高（比如當前的數(shù)據(jù)庫版本為 3，我們卻嘗試運行 open(...2)，就會產(chǎn)生錯誤并觸發(fā) openRequest.onerror）。

這很罕見，但這樣的事情可能會在用戶加載了一個過時的 JavaScript 代碼時發(fā)生（例如用戶從一個代理緩存中加載 JS）。在這種情況下，代碼是過時的，但數(shù)據(jù)庫卻是最新的。

為了避免這樣的錯誤產(chǎn)生，我們應(yīng)當檢查 db.version 并建議用戶重新加載頁面。使用正確的 HTTP 緩存頭（header）來避免之前緩存的舊代碼被加載，這樣你就永遠不會遇到此類問題。

并行更新問題

提到版本控制，有一個相關(guān)的小問題。

舉個例子：

• 一個用戶在一個瀏覽器標簽頁中打開了數(shù)據(jù)庫版本為 1 的我們的網(wǎng)站。
• 接下來我們發(fā)布了一個更新，使得代碼更新了。
• 接下來同一個用戶在另一個瀏覽器標簽中打開了這個網(wǎng)站。

這時，有一個標簽頁和版本為 1 的數(shù)據(jù)庫建立了一個連接，而另一個標簽頁試圖在其 upgradeneeded 處理程序中將數(shù)據(jù)庫版本升級到 2。

問題是，這兩個網(wǎng)頁是同一個站點，同一個源，共享同一個數(shù)據(jù)庫。而數(shù)據(jù)庫不能同時為版本 1 和版本 2。要執(zhí)行版本 2 的更新，必須關(guān)閉對版本 1 的所有連接，包括第一個標簽頁中的那個。

為了解決這一問題，versionchange 事件會在“過時的”數(shù)據(jù)庫對象上觸發(fā)。我們需要監(jiān)聽這個事件，關(guān)閉對舊版本數(shù)據(jù)庫的連接（還應(yīng)該建議訪問者重新加載頁面，以加載最新的代碼）。

如果我們不監(jiān)聽 versionchange 事件，也不去關(guān)閉舊連接，那么新的連接就不會建立。openRequest 對象會產(chǎn)生 blocked 事件，而不是 success 事件。因此第二個標簽頁無法正常工作。

下面是能夠正確處理并行升級情況的代碼。它安裝了 onversionchange 處理程序，如果當前數(shù)據(jù)庫連接過時（數(shù)據(jù)庫版本在其他位置被更新）并關(guān)閉連接，則會觸發(fā)該處理程序。

let openRequest = indexedDB.open("store", 2);
openRequest.onupgradeneeded = ...;
openRequest.onerror = ...;
openRequest.onsuccess = function() {
  let db = openRequest.result;
db.onversionchange = function() {
    db.close();
    alert("Database is outdated, please reload the page.")
  };
  // ……數(shù)據(jù)庫已經(jīng)準備好，請使用它……
};
openRequest.onblocked = function() {
  // 如果我們正確處理了 onversionchange 事件，這個事件就不應(yīng)該觸發(fā)
  // 這意味著還有另一個指向同一數(shù)據(jù)庫的連接
  // 并且在 db.onversionchange 被觸發(fā)后，該連接沒有被關(guān)閉
}; 

……換句話說，在這我們做兩件事：

• 如果當前數(shù)據(jù)庫版本過時，db.onversionchange 監(jiān)聽器會通知我們并行嘗試更新。
• openRequest.onblocked 監(jiān)聽器通知我們相反的情況：在其他地方有一個與過時的版本的連接未關(guān)閉，因此無法建立新的連接。

我們可以在 db.onversionchange 中更優(yōu)雅地進行處理，提示訪問者在連接關(guān)閉之前保存數(shù)據(jù)等。

或者，另一種方式是不在 db.onversionchange 中關(guān)閉數(shù)據(jù)庫，而是使用 onblocked 處理程序（在瀏覽器新 tab 頁中）來提醒用戶，告訴他新版本無法加載，直到他們關(guān)閉瀏覽器其他 tab 頁。

這種更新沖突很少發(fā)生，但我們至少應(yīng)該有一些對其進行處理的程序，至少在 onblocked 處理程序中進行處理，以防程序默默卡死而影響用戶體驗。

以上就是IndexedDB瀏覽器內(nèi)建數(shù)據(jù)庫并行更新問題詳解的詳細內(nèi)容，更多關(guān)于IndexedDB數(shù)據(jù)庫并行更新的資料請關(guān)注腳本之家其它相關(guān)文章！