前言

在現(xiàn)代 Web 開發(fā)中，隨著應(yīng)用程序復(fù)雜度的增加，對本地存儲的需求也越來越高。雖然 localStorage 和 sessionStorage 可以滿足一些簡單的數(shù)據(jù)存儲需求，但當(dāng)需要存儲大量結(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ù)雜查詢：支持索引和游標(biāo)，可以高效地查詢和遍歷數(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ù)庫的名稱以及當(dāng)前版本號

當(dāng)你需要升級數(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ù)庫的更新和變更。當(dāng)我們嘗試打開一個數(shù)據(jù)庫時，系統(tǒng)會檢查當(dāng)前是否存在該數(shù)據(jù)庫：

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

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

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

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

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

當(dā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ù)的標(biāo)識符
• autoIncrement：默認為false，若為true，則會自動在儲存的對象上添加標(biāo)識符屬性，并附上一個自增的正數(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ù)的唯一標(biāo)識符。這是因為前面咱們設(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 方法或游標(biāo)查詢數(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)文章希望大家以后多多支持腳本之家！

最新評論