前言

在現(xiàn)代 Web 開發(fā)中，隨著應(yīng)用程序復(fù)雜度的增加，對本地存儲的需求也越來越高。雖然 localStorage 和 sessionStorage 可以滿足一些簡單的數(shù)據(jù)存儲需求，但當需要存儲大量結(jié)構(gòu)化數(shù)據(jù)或進行復(fù)雜查詢時，它們就顯得力不從心了。這時候，IndexedDB 就成為了一個強大的選擇。本文將帶你全面了解 IndexedDB 的使用，從基礎(chǔ)操作到高級技巧，助你在項目中靈活應(yīng)用。

1. IndexedDB 是什么？為啥要用它？

首先，IndexedDB 是瀏覽器內(nèi)置的一個 NoSQL 數(shù)據(jù)庫。它和傳統(tǒng)的關(guān)系型數(shù)據(jù)庫不同，更像是一個鍵值對存儲，但功能更強大。它的特點可以用幾個關(guān)鍵詞來概括：

• 大容量：通?？梢源鎯装?MB 甚至 GB 級別的數(shù)據(jù)，非常適合需要離線存儲的應(yīng)用。
• 異步操作：所有操作都是非阻塞的，不會讓頁面卡頓。
• 復(fù)雜查詢：支持索引和游標，可以高效地查詢和遍歷數(shù)據(jù)。
• 事務(wù)支持：可以確保數(shù)據(jù)的完整性和一致性。

舉個簡單的例子，如果你在開發(fā)一個需要用戶離線使用的筆記應(yīng)用，或者一個需要存儲大量用戶數(shù)據(jù)的復(fù)雜表單，IndexedDB 絕對是你的好幫手！

2. indexedDB 數(shù)據(jù)庫的使用

2.1. 查看indexedDB

indexDB 其實是 window 對象的一個屬性。 也就是全局變量。 因此我們可以在控制臺直接輸出

通過在控制臺中輸出 indexDB 對象，我們可以一目了然地看到它所提供的各種方法。

2.2. 打開和創(chuàng)建數(shù)據(jù)庫

首先要掌握的就是它的核心方法之一 的open()。open() 方法用于打開或創(chuàng)建一個數(shù)據(jù)庫，并返回一個 IDBOpenDBRequest 對象，這個對象代表了異步操作的請求。通過IDBOpenDBRequest ，我們可以監(jiān)聽數(shù)據(jù)庫的打開狀態(tài)，并進一步執(zhí)行后續(xù)操作。

Open() 參數(shù)

讓我們來詳細了解一下 open() 方法的兩個參數(shù)：

1. 第一個參數(shù)(必傳)：數(shù)據(jù)庫名稱。用于指定你要打開或創(chuàng)建的數(shù)據(jù)庫的名稱。
2. 第二個參數(shù)(可選)：數(shù)據(jù)庫版本號。不傳默認值為 1。

在我們成功創(chuàng)建數(shù)據(jù)庫后，可以通過瀏覽器的開發(fā)者工具中 Application 面板直觀地看到數(shù)據(jù)庫的名稱以及當前版本號

當你需要升級數(shù)據(jù)庫結(jié)構(gòu)（例如新增或修改對象存儲空間）時，可以通過指定一個更高的版本號來觸發(fā) upgradeneeded 事件，進而完成數(shù)據(jù)庫的更新操作。

這兩個參數(shù)為 open() 方法提供了靈活性，既確保了操作的明確性，也為數(shù)據(jù)庫的版本管理提供了支持。??

Open() 返回值

open() 方法會返回一個 IDBOpenDBRequest 對象，這是因為 IndexedDB 中的所有操作(包括打開、讀取、編輯和刪除) ,都是異步執(zhí)行的。由于這些操作可能需要一定的時間才能完成，無法立即返回結(jié)果，因此 IDBOpenDBRequest 對象提供了一系列事件綁定機制，方便我們在操作的不同階段（如成功、失敗或數(shù)據(jù)庫需要升級時）進行相應(yīng)的處理。通過監(jiān)聽這些事件，開發(fā)者可以更靈活地控制數(shù)據(jù)庫操作的流程和響應(yīng)。

在 IndexedDB 中，版本號是一個重要的機制，用于管理數(shù)據(jù)庫的更新和變更。當我們嘗試打開一個數(shù)據(jù)庫時，系統(tǒng)會檢查當前是否存在該數(shù)據(jù)庫：

如果數(shù)據(jù)庫不存在，IndexedDB 會自動創(chuàng)建一個新的數(shù)據(jù)庫，并將其版本號初始化為 1。

如果數(shù)據(jù)庫已存在，則會根據(jù)傳入的版本號與當前保存的版本號進行比較：

• 如果傳入的版本號比當前版本更高，IndexedDB 會觸發(fā)upgradeneeded事件，此時開發(fā)者可以在事件回調(diào)中執(zhí)行數(shù)據(jù)庫的更新操作（例如創(chuàng)建、修改或刪除對象存儲表）。
• 傳入的版本號不能低于當前版本號，因為 IndexedDB 的版本號是單向遞增的，不允許回退到舊版本。

注意，這里的版本號是一個整數(shù)。如果你傳入一個float，那么將會對該float進行取整操作。

2.3. 創(chuàng)建一個對象存儲表

當創(chuàng)建一個新的數(shù)據(jù)庫或?qū)ΜF(xiàn)有數(shù)據(jù)庫進行版本升級時，IndexedDB 會觸發(fā)一個 onupgradeneeded 事件。在該事件中，通過訪問 event.target.result，我們可以獲取到 IDBDatabase 實例。借助這個實例，開發(fā)者可以執(zhí)行諸如創(chuàng)建、修改或刪除對象存儲表等數(shù)據(jù)庫升級操作，從而完成數(shù)據(jù)庫結(jié)構(gòu)的更新。

其基本使用方式如下所示：

創(chuàng)建成功后,就可以在控制臺中查看到創(chuàng)建的存儲空間

createObjectStore 參數(shù)

1. name：第一個參數(shù), 表示儲存表的名稱
2. keyOptions: 第二個參數(shù)(可選參數(shù)), 是配置對象，

• keyPath: 儲存數(shù)據(jù)的標識符
• autoIncrement：默認為false，若為true，則會自動在儲存的對象上添加標識符屬性，并附上一個自增的正數(shù)值（1，2，3，4…）

3. IndexedDB 核心操作

3.1. 開啟事務(wù)獲取存儲對象

indexedDB的所有操作都需要在事務(wù)中，我們看一個開啟事務(wù)的操作：

1. 第一個參數(shù)是一個數(shù)組，數(shù)組中包含此事務(wù)將會處理的存儲對象名稱；
2. 第二個參數(shù)是事務(wù)的處理模式，比如 readonly 或 readwrite，分別表示只讀和讀寫模式。

一旦事務(wù)創(chuàng)建成功，我們可以監(jiān)聽事務(wù)的 complete 和 error 事件，以處理事務(wù)完成或出錯的情況。接下來，我們可以通過事務(wù)對象對指定的 myObjectStore 執(zhí)行操作

在操作數(shù)據(jù)之前，咱們得先通過事務(wù)調(diào)用 objectStore 方法，拿到要操作的存儲對象。這個方法會返回一個 IDBDatabase 類型的存儲對象實例。有了這個實例，咱們就可以調(diào)用它的各種方法來操作數(shù)據(jù)了。

通過輸出的存儲對象實例，我們可以直接查看其提供的各種操作方法，從而通過這些方法操作存儲數(shù)據(jù)。

3.2. 添加數(shù)據(jù)

獲取到存儲對象后, 就可以調(diào)用它提供的 add 方法來新增數(shù)據(jù)。

添加數(shù)據(jù)示例:

數(shù)據(jù)添加成功后，你可以去查看數(shù)據(jù)表里的內(nèi)容。這時候你會發(fā)現(xiàn)，數(shù)據(jù)里多了一個 id 屬性，這就是這條數(shù)據(jù)的唯一標識符。這是因為前面咱們設(shè)置了自動生成 id 的功能。如果沒設(shè)置的話，那就得手動給數(shù)據(jù)添加一個 id 屬性了。但要注意，id 的值必須唯一，不能和其他數(shù)據(jù)重復(fù)，不然添加就會失敗。

3.3. 更新數(shù)據(jù)

要更新數(shù)據(jù)，可以使用put()方法。使用 put 方法更新數(shù)據(jù)時，如果數(shù)據(jù)不存在則會添加。

3.4. 查詢數(shù)據(jù)

通過 get 方法或游標查詢數(shù)據(jù)。調(diào)用get方法需要傳入主鍵id

3.5. 刪除數(shù)據(jù)

通過delete方法刪除單個條目或者clear 方法刪除整個對象。

使用 delete 方法刪除數(shù)據(jù)時, 需要傳入主鍵, 根據(jù)主鍵刪除。

總結(jié)

本文全面介紹了 IndexedDB 的核心概念和使用方法，包括數(shù)據(jù)庫的創(chuàng)建與升級、對象存儲表的構(gòu)建、數(shù)據(jù)的增刪改查以及事務(wù)管理。通過詳細的代碼示例和清晰的步驟說明，讀者可以快速上手并靈活應(yīng)用 IndexedDB，滿足復(fù)雜 Web 應(yīng)用對本地存儲的需求。無論是離線應(yīng)用開發(fā)還是大容量數(shù)據(jù)管理，IndexedDB 都能成為你的得力助手。

到此這篇關(guān)于前端數(shù)據(jù)庫IndexedDB基礎(chǔ)使用的文章就介紹到這了,更多相關(guān)前端數(shù)據(jù)庫IndexedDB使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論