IndexedDB 解釋道。

在上一篇文章中，我們討論了 Dexie，IndexedDB 的包裝器。在本文中，我們討論 IndexedDB。您必須熟悉這個 localStorage API，通常用於在瀏覽器中儲存資訊。類似地，IndexedDB 用於客戶端儲存。

什麼是 IndexedDB？

MDN文件說明：

IndexedDB 是一個低階 API，用於客戶端儲存大量結構化資料（包括檔案/blob）。此 API 使用索引來實現對此資料的高效能搜尋。雖然 Web 儲存對於儲存少量資料很有用，但對於儲存大量結構化資料則不太有用。

IndexedDB 提供了一個解決方案。這是 MDN IndexedDB 報告的主要登陸頁面 - 在這裡我們提供完整 API 參考和使用指南、瀏覽器支援詳細資訊以及關鍵概念的一些解釋的連結。

範例儲存庫：

MDN 提供了一個範例 Github 儲存庫，並有 script/todo.js。

使用 window.onload 初始化腳本

window.onload = () => {
}

開啟資料庫要求：

// Let us open our database
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

連線錯誤：

// Register two event handlers to act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
 note.appendChild(createListItem('Error loading database.'));
};

資料庫連線成功時：

DBOpenRequest.onsuccess = (event) => {
 note.appendChild(createListItem('Database initialised.'));
// Store the result of opening the database in the db variable. This is used a lot below
 db = DBOpenRequest.result;
// Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
 displayData();
};

新增資料

// Open a read/write DB transaction, ready for adding the data
const transaction = db.transaction(['toDoList'], 'readwrite');
// Call an object store that's already been added to the database
const objectStore = transaction.objectStore('toDoList');
// Make a request to add our newItem object to the object store
const objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = (event) => {
 // process data on success.
}
// Report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendChild(createListItem('Transaction completed: database modification finished.'));
// Update the display of data to show the newly added item, by running displayData() again.
 displayData();
};
// Handler for any unexpected error
transaction.onerror = () => {
 note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
};

觀察：localStorage 與 IndexedDB

您現在可能已經意識到，僅添加一條記錄就需要大量程式碼，您有非同步回調，例如 onerror 和 onsuccess。這個堆疊交換答案中指出了這一點。

為了簡化處理此 IndexedDB，可以使用 Dexie。

使用 Dexie 新增資料：

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 <>
 <p>{status}</p>
 Name:
 <input
 type="text"
 value={name}
 onChange={(ev) => setName(ev.target.value)}
 />
 Age:
 <input
 type="number"
 value={age}
 onChange={(ev) => setAge(Number(ev.target.value))}
 />
 <button onClick={addFriend}>Add</button>
 </>
 );
}

這個包裝 API 讓我想起了 Prisma 和 Drizzle 等 ORM。

關於我們：

在 Thinkthroo，我們研究大型開源專案並提供架構指南。我們開發了使用 tailwind 建立的 resubale 元件，您可以在您的專案中使用它們。我們提供 Next.js、React 和 Node 開發服務。

與我們預約會面討論您的專案。

參考資料：

1. https://www.reddit.com/r/sveltejs/comments/15rj12h/any_downsides_to_using_indexeddb_vs_localstorage/

2. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

3. https://github.com/mdn/dom-examples/tree/main/to-do-notifications

4. https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-與indexeddb不同

以上是IndexedDB 解釋道。的詳細內容。更多資訊請關注PHP中文網其他相關文章！