前言

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

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

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

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

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

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

2.1. 查看indexedDB

indexDB 其實(shí)是 window 對(duì)象的一個(gè)屬性。 也就是全局變量。 因此我們可以在控制臺(tái)直接輸出

通過(guò)在控制臺(tái)中輸出 indexDB 對(duì)象，我們可以一目了然地看到它所提供的各種方法。

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

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

Open() 參數(shù)

讓我們來(lái)詳細(xì)了解一下 open() 方法的兩個(gè)參數(shù)：

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

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

當(dāng)你需要升級(jí)數(shù)據(jù)庫(kù)結(jié)構(gòu)（例如新增或修改對(duì)象存儲(chǔ)空間）時(shí)，可以通過(guò)指定一個(gè)更高的版本號(hào)來(lái)觸發(fā) upgradeneeded 事件，進(jìn)而完成數(shù)據(jù)庫(kù)的更新操作。

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

Open() 返回值

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

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

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

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

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

注意，這里的版本號(hào)是一個(gè)整數(shù)。如果你傳入一個(gè)float，那么將會(huì)對(duì)該float進(jìn)行取整操作。

2.3. 創(chuàng)建一個(gè)對(duì)象存儲(chǔ)表

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

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

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

createObjectStore 參數(shù)

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

• keyPath: 儲(chǔ)存數(shù)據(jù)的標(biāo)識(shí)符
• autoIncrement：默認(rèn)為false，若為true，則會(huì)自動(dòng)在儲(chǔ)存的對(duì)象上添加標(biāo)識(shí)符屬性，并附上一個(gè)自增的正數(shù)值（1，2，3，4…）

3. IndexedDB 核心操作

3.1. 開(kāi)啟事務(wù)獲取存儲(chǔ)對(duì)象

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

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

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

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

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

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

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

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

數(shù)據(jù)添加成功后，你可以去查看數(shù)據(jù)表里的內(nèi)容。這時(shí)候你會(huì)發(fā)現(xiàn)，數(shù)據(jù)里多了一個(gè) id 屬性，這就是這條數(shù)據(jù)的唯一標(biāo)識(shí)符。這是因?yàn)榍懊嬖蹅冊(cè)O(shè)置了自動(dòng)生成 id 的功能。如果沒(méi)設(shè)置的話，那就得手動(dòng)給數(shù)據(jù)添加一個(gè) id 屬性了。但要注意，id 的值必須唯一，不能和其他數(shù)據(jù)重復(fù)，不然添加就會(huì)失敗。

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

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

3.4. 查詢(xún)數(shù)據(jù)

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

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

通過(guò)delete方法刪除單個(gè)條目或者clear 方法刪除整個(gè)對(duì)象。

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

總結(jié)

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

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

最新評(píng)論