前言

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

---

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

首先，IndexedDB 是瀏覽器內置的一個 NoSQL 數據庫。它和傳統的關系型數據庫不同，更像是一個鍵值對存儲，但功能更強大。它的特點可以用幾個關鍵詞來概括：

• 大容量：通常可以存儲幾百 MB 甚至 GB 級別的數據，非常適合需要離線存儲的應用。
• 異步操作：所有操作都是非阻塞的，不會讓頁面卡頓。
• 復雜查詢：支持索引和游標，可以高效地查詢和遍歷數據。
• 事務支持：可以確保數據的完整性和一致性。

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

---

2. indexedDB 數據庫的使用

2.1. 查看indexedDB

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

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

2.2. 打開和創建數據庫

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

Open() 參數

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

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

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

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

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

Open() 返回值

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

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

如果數據庫不存在，IndexedDB 會自動創建一個新的數據庫，并將其版本號初始化為 1。

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

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

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

2.3. 創建一個對象存儲表

當創建一個新的數據庫或對現有數據庫進行版本升級時，IndexedDB 會觸發一個 onupgradeneeded 事件。在該事件中，通過訪問 event.target.result，我們可以獲取到 IDBDatabase 實例。借助這個實例，開發者可以執行諸如創建、修改或刪除對象存儲表等數據庫升級操作，從而完成數據庫結構的更新。

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

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

createObjectStore 參數

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

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

3. IndexedDB 核心操作

3.1. 開啟事務獲取存儲對象

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

在 IndexedDB 中，`transaction` 方法用于創建一個事務對象，以便對指定的存儲對象進行操作。`transaction`方法接收兩個參數：

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

一旦事務創建成功，我們可以監聽事務的 complete 和 error 事件，以處理事務完成或出錯的情況。接下來，我們可以通過事務對象對指定的 myObjectStore 執行操作

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

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

3.2. 添加數據

獲取到存儲對象后, 就可以調用它提供的 add 方法來新增數據。

添加數據示例:

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

3.3. 更新數據

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

3.4. 查詢數據

通過 get 方法或游標查詢數據。調用get方法需要傳入主鍵id

3.5. 刪除數據

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

使用 delete 方法刪除數據時, 需要傳入主鍵, 根據主鍵刪除。

---

總結

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

如果覺得本文對你有幫助，希望能夠給我點贊支持一下哦 💪 也可以關注wx公眾號：程序員付杰 ，一起學習編程技能