构建现代 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中文网其他相关文章！
