怎么使用IndexedDB

這篇文章主要講解了“怎么使用IndexedDB”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用IndexedDB”吧！

深入研究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”的內容了，經過本文的學習后，相信大家對怎么使用IndexedDB這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！