隨著 Web 應用程式變得越來越複雜，對高效能客戶端儲存解決方案的需求也在成長。 IndexedDB 是一種用於儲存大量結構化資料的低階 API，對於希望創建強大且具有離線功能的應用程式的 Web 開發人員、軟體工程師和 Web 愛好者來說，這是一個強大的工具。
在這篇部落格中，我們將透過實際範例探討 IndexedDB 是什麼、它是如何運作的以及如何有效地使用它。無論您是建立漸進式 Web 應用程式 (PWA)、複雜的儀表板還是遊戲，IndexedDB 都可以幫助您無縫管理資料。
IndexedDB 是一個基於瀏覽器的 NoSQL 資料庫，設計用於儲存大量結構化數據，包括檔案和 blob。與 cookie 或 localStorage 不同，IndexedDB 允許您以結構化格式儲存資料並使用索引對其進行查詢，使其成為複雜用例的理想選擇。
IndexedDB 運作的資料庫結構包括：
IndexedDB中的主要操作包括：
以下是如何使用物件儲存使用者建立名為 MyDatabase 的 IndexedDB 資料庫。
const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.
const request = indexedDB.open(dbName, dbVersion);
request.onupgradeneeded = function (event) {
const db = event.target.result;
// Create an object store named 'users' with 'id' as the keyPath
if (!db.objectStoreNames.contains("users")) {
db.createObjectStore("users", { keyPath: "id" });
}
console.log("Database setup complete");
};
request.onsuccess = function (event) {
const db = event.target.result;
console.log("Database opened successfully");
};
request.onerror = function (event) {
console.error("Error opening database:", event.target.errorCode);
};
說明：
indexedDB.open 方法開啟或建立資料庫。
建立新資料庫或升級資料庫版本時會觸發 onupgradeneeded 事件。
建立名為 users 的物件存儲，並以 id 作為主鍵。
您可以使用交易將資料新增至物件儲存。
function addUser(id, name, email) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const user = { id, name, email };
const addRequest = objectStore.add(user);
addRequest.onsuccess = function () {
console.log("User added:", user);
};
addRequest.onerror = function (event) {
console.error("Error adding user:", event.target.errorCode);
};
};
}
// Add a new user
addUser(1, "John Doe", "john.doe@example.com");
說明：
建立一個讀寫模式的交易來修改資料。
add 方法將資料插入到使用者物件儲存中。
使用 get 方法檢索資料或迭代所有條目。
function getUser(id) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readonly");
const objectStore = transaction.objectStore("users");
const getRequest = objectStore.get(id);
getRequest.onsuccess = function () {
if (getRequest.result) {
console.log("User found:", getRequest.result);
} else {
console.log("User not found");
}
};
getRequest.onerror = function (event) {
console.error("Error retrieving user:", event.target.errorCode);
};
};
}
// Get user with ID 1
getUser(1);
說明：
get 方法透過其鍵取得特定記錄。
資料檢索是非同步的，因此使用成功和錯誤處理程序。
使用 put 方法更新現有記錄。
function updateUser(id, updatedData) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const putRequest = objectStore.put({ ...updatedData, id });
putRequest.onsuccess = function () {
console.log("User updated:", { ...updatedData, id });
};
putRequest.onerror = function (event) {
console.error("Error updating user:", event.target.errorCode);
};
};
}
// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });
使用delete方法刪除一筆記錄。
function deleteUser(id) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const deleteRequest = objectStore.delete(id);
deleteRequest.onsuccess = function () {
console.log("User deleted with ID:", id);
};
deleteRequest.onerror = function (event) {
console.error("Error deleting user:", event.target.errorCode);
};
};
}
// Delete user with ID 1
deleteUser(1);
| Feature | IndexedDB | localStorage | sessionStorage |
|---|---|---|---|
| Storage Limit | Several MB to GB | 5 MB (approx) | 5 MB (approx) |
| Data Format | Key-value pairs | Key-value pairs | Key-value pairs |
| Asynchronous | Yes | No | No |
| Structured Data | Yes | No | No |
正確使用事務：始終管理事務內的資料操作，以確保原子性。
優雅地處理錯誤：實作錯誤處理程序以更好地除錯和使用者回饋。
版本控制：小心增加資料庫版本以管理架構變更。
測試離線場景：IndexedDB通常用於離線功能；確保其在沒有網路連線的情況下按預期運作。
IndexedDB 是一個強大的客戶端資料儲存工具，提供的功能遠遠超越 localStorage 等傳統儲存方法。 IndexedDB 支援結構化資料、大儲存容量和離線功能，是建立現代 Web 應用程式的必備技術。
重點：
IndexedDB 非常適合在本地儲存大型且複雜的資料集。
事務是 IndexedDB 中管理資料操作的核心。
它提供強大的離線支持，使其成為漸進式 Web 應用程式的基石。
透過掌握 IndexedDB，您可以建立具有卓越效能和使用者體驗的可擴展、離線優先的應用程式。立即開始在您的專案中嘗試 IndexedDB！
以上是如何使用IndexedDB？完整CRUD操作指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
