建立現代 Web 應用程序，尤其是漸進式 Web 應用程式 (PWA) 時，擁有一種離線儲存資料的方法至關重要。 IndexedDB 是一個功能強大的客戶端資料庫，允許 Web 應用程式儲存和檢索數據，即使使用者處於離線狀態也是如此。本指南將引導您了解 IndexedDB 的基礎知識，向您展示如何在 Web 應用程式中建立、讀取、更新和刪除資料（CRUD 操作）。
IndexedDB 是一個低階 API，用於客戶端儲存大量結構化資料（包括檔案和 blob）。與 localStorage 不同，IndexedDB 可讓您儲存複雜的資料類型，而不僅僅是字串。它使用非同步事務性資料庫模型，這使得它對需要處理大型資料集或離線資料同步的應用程式來說非常強大。
讓我們深入了解使用 IndexedDB 的核心步驟。我們將涵蓋：
要與 IndexedDB 交互，首先需要開啟與資料庫的連線。如果資料庫不存在，則會建立它。
const request = indexedDB.open('MyCustomersDatabase', 1);
request.onerror = (event) => {
console.error('Database error:', event.target.errorCode);
};
request.onsuccess = (event) => {
const db = event.target.result;
console.log('Database opened successfully', db);
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('customers')) {
const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
console.log('Object store created.');
}
};
這是發生的事情：
現在我們已經設定了資料庫和物件存儲，讓我們在其中添加一些資料。
const addCustomer = (db, customer) => {
const transaction = db.transaction(['customers'], 'readwrite');
const objectStore = transaction.objectStore('customers');
const request = objectStore.add(customer);
request.onsuccess = () => {
console.log('Customer added:', customer);
};
request.onerror = (event) => {
console.error('Error adding customer:', event.target.errorCode);
};
}
const customer = { id: 1, name: 'John Doe', email: 'john@example.com' };
request.onsuccess = (event) => {
const db = event.target.result;
addCustomer(db, customer);
};
這是發生的事情：
從 IndexedDB 讀取資料也很簡單。讓我們使用 get() 方法來檢索剛剛新增的客戶。
const getCustomer = (db, id) => {
const transaction = db.transaction(['customers'], 'readonly');
const objectStore = transaction.objectStore('customers');
const request = objectStore.get(id);
request.onsuccess = (event) => {
const customer = event.target.result;
if (customer) {
console.log('Customer found:', customer);
} else {
console.log('Customer not found.');
}
};
request.onerror = (event) => {
console.error('Error fetching customer:', event.target.errorCode);
};
}
request.onsuccess = (event) => {
const db = event.target.result;
getCustomer(db, 1); // Fetch customer with ID 1
};
要更新現有記錄，我們可以使用 put() 方法，該方法的工作方式與 add() 類似，但如果鍵已存在，則會取代記錄。
const updateCustomer = (db, customer) => {
const transaction = db.transaction(['customers'], 'readwrite');
const objectStore = transaction.objectStore('customers');
const request = objectStore.put(customer);
request.onsuccess = () => {
console.log('Customer updated:', customer);
};
request.onerror = (event) => {
console.error('Error updating customer:', event.target.errorCode);
};
}
const updatedCustomer = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };
request.onsuccess = (event) => {
const db = event.target.result;
updateCustomer(db, updatedCustomer);
};
最後，要刪除一筆記錄，請使用delete()方法。
const deleteCustomer = (db, id) => {
const transaction = db.transaction(['customers'], 'readwrite');
const objectStore = transaction.objectStore('customers');
const request = objectStore.delete(id);
request.onsuccess = () => {
console.log('Customer deleted.');
};
request.onerror = (event) => {
console.error('Error deleting customer:', event.target.errorCode);
};
}
request.onsuccess = (event) => {
const db = event.target.result;
deleteCustomer(db, 1); // Delete customer with ID 1
};
IndexedDB 是一個強大的解決方案，用於處理客戶端資料存儲，尤其是在離線優先的 Web 應用程式中。透過遵循本指南，您已經學會如何：
使用 IndexedDB，您可以建立更具彈性的 Web 應用程序，在本地儲存數據，即使沒有互聯網連接也可以工作。
MDN Web 文件 - IndexedDB API
關於 IndexedDB 的工作原理、API 方法和用例的綜合指南。
MDN IndexedDB 指南
Google 開發者 - IndexedDB
一篇詳細的文章，介紹了 IndexedDB 建立離線網路應用程式的最佳實踐和使用。
Google 開發者 - IndexedDB
W3C 索引資料庫 API
W3C 的官方規格概述了 IndexedDB 的技術實現和結構。
W3C IndexedDB 規範
如果您希望在本教程之外探索有關 IndexedDB 的更多信息，這些資源將提供額外的深度和背景！
編碼愉快！
以上是IndexedDB 初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
