如何使用IndexedDB —瀏覽器上的NoSQL數(shù)據(jù)庫

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

你是否聽說過瀏覽器上的NoSQL數(shù)據(jù)庫？

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

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

在本文中，我們將重點介紹以下內(nèi)容。

• 為什么我們需要IndexedDB？
• 我們?nèi)绾卧谖覀兊膽?yīng)用程序中使用IndexedDB？
• IndexedDB的功能
• IndexedDB的局限性
• IndexedDB是否適合你的應(yīng)用程序？

為什么我們需要IndexedDB？

IndexedDB被認(rèn)為比localStorage更強大！

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

可以存儲比localStorage大得多的數(shù)據(jù)量

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

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

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

提供查找界面

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

對于不需要持續(xù)互聯(lián)網(wǎng)連接的Web應(yīng)用程序很有用

IndexedDB對于聯(lián)機和脫機工作的應(yīng)用程序都非常有用，例如，它可以用于漸進(jìn)式Web應(yīng)用程序（PWA）中的客戶端存儲。

應(yīng)用狀態(tài)可以存儲

通過為經(jīng)常使用的用戶存儲應(yīng)用程序狀態(tài)，可以大大提高應(yīng)用程序的性能。稍后，應(yīng)用程序可以與后端服務(wù)器同步，并通過延遲加載來更新應(yīng)用程序。

我們來看看IndexedDB的結(jié)構(gòu)，它可以存儲多個數(shù)據(jù)庫。

IndexedDB的結(jié)構(gòu)

我們?nèi)绾卧谖覀兊膽?yīng)用程序中使用IndexedDB？

在以下部分中，我們將研究如何使用IndexedDB引導(dǎo)應(yīng)用程序。

1. 使用“window.indexedDB”打開數(shù)據(jù)庫連接

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

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

2. 創(chuàng)建對象存儲

打開數(shù)據(jù)庫連接后，將觸發(fā) onupgradeneeded 事件，可用于創(chuàng)建對象存儲。

// 創(chuàng)建UserDetails對象存儲庫和索引
request.onupgradeneeded = (event) => {
  let db = event.target.result;

  // 創(chuàng)建UserDetails對象存儲
  // 具有自動遞增ID
  let store = db.createObjectStore('UserDetails', {
    autoIncrement: true
  });

  // 在NIC屬性上創(chuàng)建索引
  let index = store.createIndex('nic', 'nic', {
    unique: true
  });
};

3. 將數(shù)據(jù)插入對象存儲

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

function insertUser(db, user) {
  // 創(chuàng)建一個新事物
  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);
  }

  // 事務(wù)完成后關(guān)閉數(shù)據(jù)庫
  txn.oncomplete = function () {
    db.close();
  };
}

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

request.onsuccess = (event) => {
   const db = event.target.result;
   insertUser(db, {
     email: '[email protected]',
     firstName: 'John',
     lastName: 'Doe',
   });
   insertUser(db, {
     email: '[email protected]',
     firstName: 'Ann',
     lastName: 'Doe'
   });
};

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

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

IndexedDB的功能

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

具有異步API

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

支持事務(wù)以確?？煽啃?/strong>

如果一個步驟失敗，則事務(wù)將被取消，數(shù)據(jù)庫將回滾到先前的狀態(tài)。

支持版本控制

你可以在創(chuàng)建數(shù)據(jù)庫時對其進(jìn)行版本控制，并在需要時對其進(jìn)行升級。在IndexedDB中也可以從舊版本遷移到新版本。

私有域

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

IndexedDB的局限性

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

• 即使有現(xiàn)代瀏覽器的支持，但I(xiàn)E等瀏覽器并沒有完全支持。
• Firefox 在私人瀏覽模式下完全禁用 IndexedDB - 這可能導(dǎo)致你的應(yīng)用程序在通過隱身窗口訪問時發(fā)生故障。

IndexedDB是否適合你的應(yīng)用程序？

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

• 你的應(yīng)用程序需要脫機訪問嗎？
• 你是否需要在客戶端存儲大量數(shù)據(jù)？
• 你是否需要快速查找/搜索大量數(shù)據(jù)中的數(shù)據(jù)？
• 你的應(yīng)用程序是否使用IndexedDB支持的瀏覽器訪問客戶端存儲？
• 你是否需要存儲各種類型的數(shù)據(jù)，包括JavaScript對象？
• 從客戶端存儲進(jìn)行寫入/讀取是否需要非阻塞？

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

總結(jié)

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

希望你對IndexedDB及其好處有一個清晰的認(rèn)識。

粉絲福利

• ??針對JavaScript開發(fā)人員的Rust簡介
  
• ??Python和JavaScript——這兩種流行的編程語言之間的主要區(qū)別是什么?
  
• ? 編程日歷小程序，對小程序云開發(fā)和生成海報的實踐
  
• 一個付費 chrome 插件的一生
• 2021年管理Monorepo代碼庫的11種出色工具
  
• 如何在React應(yīng)用中實現(xiàn)“使用GitHub登錄”
  
• Cleave.js：Web表單開發(fā)之實時格式化顯示

-?END -

點贊 + 在看 + 留言，下一個幸運兒就是你！
走心的分享更容易被抽中~
開獎時間?下期文末