在上一篇文章中，我們討論了Dexie，Dexie是IndexedDB的包裝紙。在本文中，我們討論了索引。您必須熟悉此LocalStorage API，通常用於將信息存儲在瀏覽器中。同樣，indexedDB用於客戶端存儲。

什麼是indexeddb？

[2 IndexEdDB是用於客戶端存儲大量結構化數據（包括文件/blobs）的低級API。該API使用索引來啟用此數據的高性能搜索。雖然Web存儲對於存儲少量數據很有用，但對於存儲較大量的結構化數據而言，它不太有用。

[2
indexedDB提供了一個解決方案。這是MDN的索引EDEXEDDB覆蓋範圍的主要著陸頁 - 我們在這裡提供了完整的API參考和使用指南，瀏覽器支持詳細信息以及對關鍵概念的一些解釋。

示例存儲庫：

MDN提供了一個示例GitHub存儲庫，並具有腳本/todo.js。

腳本是使用window.onload初始化的

打開數據庫請求：

//讓我們打開數據庫 const dbopenrequest = window.indexeddb.open（'todolist'，4）;

window.onload = () => {
}

//註冊兩個事件處理程序，以成功打開的數據庫 dbopenrequest.onerror =（event）=> { Note.AppendChild（createListItem（'錯誤加載數據庫。'））; };

在成功的數據庫連接上：

window.onload = () => {
}

dbopenrequest.onsuccess =（event）=> { Note.AppendChild（createListItem（'數據庫初始化。'））; //存儲在DB變量中打開數據庫的結果。這在下面使用了很多 db = dbopenrequest.result; //運行DisplayData（）函數以填充任務列表，並使用indexeddb中的所有待辦事項列表數據 displayData（）; };

添加數據

window.onload = () => {
}

//打開讀/寫DB事務，準備添加數據 const交易= db.transaction（['todolist']，'readwrite'）; //調用已經添加到數據庫的對象存儲 const ObjectStore = trassaction.ObjectStore（'Todolist'）; //請求將我們的newitem對象添加到對象存儲 const ObjectStoreRequest = ObjectStore.Add（newitem [0]）; ObjectStoreReQuest.Onccess =（event）=> { //處理成功數據。 } //報告完成交易完成的成功 transaction.oncomplete =（）=> { Note.AppendChild（createListItem（“完成交易完成：完成數據庫修改完成。”）; //通過再次運行DisplayData（），更新數據顯示以顯示新添加的項目。 displayData（）; }; //處理程序出現任何意外錯誤 transaction.onerror =（）=> { note.appendchild（createListItem（`由於錯誤而未打開事務：$ {trassaction.error}`））; };

觀察：localstorage vs indexeddb

window.onload = () => {
}

您現在可能已經意識到，僅需添加記錄就需要很多代碼，您的同步回調（例如OnError和Onsuccess）。這是在此堆棧交換答案中指向的。 簡化處理此索引，可以使用dexie。

與dexie一起添加數據：

window.onload = () => {
}

導出函數addfriendform（{defaultage} = {defaultage：21}）{ const [name，setName] = usestate（''）; const [age，setage] = usestate（默認值）; const [狀態，setStatus] = usestate（''）; 異步函數addfriend（）{ 嘗試 { //添加新朋友！ const ID =等待db.friends.add（{ 姓名， 年齡 }）; setStatus（`friend $ {name}成功添加。獲取id $ {id}`）; setName（''）; setage（默認值）; } catch（錯誤）{ setStatus（`未能添加$ {name}：$ {error}`）; } } 返回 （

{狀態}

姓名： setName（ev.target.value）} /> 年齡： setage（number（ev.target.value））}} /> add > ）； } 此包裝API使我想起了諸如Prisma和Prizzle之類的Orms。

關於我們：

在ThinkThroo，我們研究大型開源項目並提供建築指南。我們已經開發了可以在項目中使用的重新提交組件，該組件是用尾風構建的。我們提供Next.js，React和Node Development Services。

與我們預定會議討論您的項目。 [2 [2

參考：

window.onload = () => {
}

https://softwareengineering.stackexchange.com/questions/questions/219953/how-is-is-localstorage-different-from-indexeddb