[[382232]]

深入研究IndexedDB API及其在實踐中的用法。

你是否聽說過瀏覽器上的NoSQL數據庫?

IndexedDB是大型NoSQL存儲系統。它使你幾乎可以將任何內容存儲在用戶的瀏覽器中。除了通常的搜索，獲取和放置操作外，IndexedDB還支持事務。

你可以在下面找到IndexedDB的示例。

在本文中，我們將重點介紹以下內容。

• 為什么我們需要IndexedDB?
• 我們如何在我們的應用程序中使用IndexedDB?
• IndexedDB的功能
• IndexedDB的局限性
• IndexedDB是否適合你的應用程序?

為什么我們需要IndexedDB?

IndexedDB被認為比localStorage更強大!

你知道背后的原因嗎?讓我們找出答案。

可以存儲比localStorage大得多的數據量

沒有像 localStorage 這樣的特殊限制(介于2.5MB和10MB之間)。最大限制取決于瀏覽器和磁盤空間。例如，基于Chrome和Chromium的瀏覽器最多允許80%的磁盤空間。如果你有100GB，則IndexedDB最多可以使用80GB的空間，單個origin最多可以使用60GB。Firefox允許每個origin最多2GB，而Safari允許每個來源最多1GB。

可以存儲基于{ key: value }對的任何類型的值

存儲不同數據類型的靈活性更高。這不僅意味著字符串，而且還意味著二進制數據(ArrayBuffer對象，Blob對象等)。它使用對象存儲在內部保存數據。

提供查找界面

這在其他瀏覽器存儲選項(例如 localStorage 和 sessionStorage)中不可用。

對于不需要持續互聯網連接的Web應用程序很有用

IndexedDB對于聯機和脫機工作的應用程序都非常有用，例如，它可以用于漸進式Web應用程序(PWA)中的客戶端存儲。

應用狀態可以存儲

通過為經常使用的用戶存儲應用程序狀態，可以大大提高應用程序的性能。稍后，應用程序可以與后端服務器同步，并通過延遲加載來更新應用程序。

我們來看看IndexedDB的結構，它可以存儲多個數據庫。

IndexedDB的結構

我們如何在我們的應用程序中使用IndexedDB?

在以下部分中，我們將研究如何使用IndexedDB引導應用程序。

1. 使用“window.indexedDB”打開數據庫連接

const openingRequest = indexedDB.open('UserDB', 1); 

在這里 UserDB 是數據庫名稱，1 是數據庫的版本。這將返回一個對象，該對象是 IDBOpenDBRequest 接口的實例。

2. 創建對象存儲

打開數據庫連接后，將觸發 onupgradeneeded 事件，可用于創建對象存儲。

// 創建UserDetails對象存儲庫和索引 
request.onupgradeneeded = (event) => { 
  let db = event.target.result; 
 
  // 創建UserDetails對象存儲 
  // 具有自動遞增ID 
  let store = db.createObjectStore('UserDetails', { 
    autoIncrement: true 
  }); 
 
  // 在NIC屬性上創建索引 
  let index = store.createIndex('nic', 'nic', { 
    unique: true 
  }); 
}; 

3. 將數據插入對象存儲

一旦打開了與數據庫的連接，就可以在 onsuccess 事件處理程序中管理數據。插入數據發生在4個步驟中。

function insertUser(db, user) { 
  // 創建一個新事物 
  const txn = db.transaction('User', 'readwrite'); 
 
  // 獲取UserDetails對象存儲 
  const store = txn.objectStore('UserDetails'); 
  // 插入新記錄 
  let query = store.put(user); 
 
  // 處理成功用例 
  query.onsuccess = function (event) { 
    console.log(event); 
  }; 
 
  // 處理失敗用例 
  query.onerror = function (event) { 
    console.log(event.target.errorCode); 
  } 
 
  // 事務完成后關閉數據庫 
  txn.oncomplete = function () { 
    db.close(); 
  }; 
} 

一旦創建了插入函數，請求的 onsuccess 事件處理程序就可以用來插入更多的記錄。

request.onsuccess = (event) => { 
   const db = event.target.result; 
   insertUser(db, { 
     email: 'john.doe@outlook.com', 
     firstName: 'John', 
     lastName: 'Doe', 
   }); 
   insertUser(db, { 
     email: 'ann.doe@gmail.com', 
     firstName: 'Ann', 
     lastName: 'Doe' 
   }); 
}; 

在IndexedDB上可以執行許多操作，其中一些如下：

• 通過key從對象存儲中讀取/搜索數據
• 按index從對象存儲中讀取/搜索數據
• 更新記錄數據
• 刪除記錄
• 從數據庫的先前版本等進行遷移

IndexedDB的功能

IndexedDB提供了許多特殊的功能，這是其他瀏覽器存儲無法實現的，下面簡要說明一些功能。

具有異步API

這使執行昂貴的操作而不會阻塞UI線程，并為用戶提供了更好的體驗。

支持事務以確保可靠性

如果一個步驟失敗，則事務將被取消，數據庫將回滾到先前的狀態。

支持版本控制

你可以在創建數據庫時對其進行版本控制，并在需要時對其進行升級。在IndexedDB中也可以從舊版本遷移到新版本。

私有域

數據庫是一個域的私有數據庫，因此任何其他網站都不能訪問其他網站的 IndexedDB 存儲。這也就是所謂的同源策略。

IndexedDB的局限性

到目前為止，IndexedDB似乎很有希望用于客戶端存儲。然而，有一些值得注意的限制。

• 即使有現代瀏覽器的支持，但IE等瀏覽器并沒有完全支持。

• Firefox 在私人瀏覽模式下完全禁用 IndexedDB - 這可能導致你的應用程序在通過隱身窗口訪問時發生故障。

IndexedDB是否適合你的應用程序?

基于 IndexedDB 提供的許多功能，這個百萬美元問題的答案可能是 Yes!然而，在下結論之前，請問自己以下問題。

你的應用程序需要脫機訪問嗎?

• 你是否需要在客戶端存儲大量數據?
• 你是否需要快速查找/搜索大量數據中的數據?
• 你的應用程序是否使用IndexedDB支持的瀏覽器訪問客戶端存儲?
• 你是否需要存儲各種類型的數據，包括JavaScript對象?
• 從客戶端存儲進行寫入/讀取是否需要非阻塞?

如果對上述所有問題的回答均為“是”，則IndexedDB是你的最佳選擇。但如果不需要這樣的功能，你不妨選擇像 localStorage 這樣的存儲方法，因為它提供了廣泛的瀏覽器應用，并且具有易于使用的API。

總結

當我們考慮所有的客戶端存儲機制時，IndexedDB是一個明顯的贏家。我們來看看不同客戶端存儲方式的總結比較。

希望你對IndexedDB及其好處有一個清晰的認識。

本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。