在现代 Web 应用程序中，离线存储数据已经成为了一种非常重要的需求。传统的 Web 应用程序通常会使用 cookie 或者 localStorage 来存储数据，但是这些方法都有一些限制，比如存储容量不够大、无法存储复杂的数据结构等。而 PWA（Progressive Web Apps）则提供了一种更加强大的离线存储技术：IndexedDB。
什么是 IndexedDB
IndexedDB 是一种浏览器内置的 NoSQL 数据库，它可以在浏览器中存储大量的结构化数据，并且支持离线存储和离线读取。IndexedDB 的数据结构类似于 JavaScript 中的对象存储，每个对象存储包含多个键值对。与传统的关系型数据库不同，IndexedDB 使用对象存储来存储数据，而不是表格。
IndexedDB 的使用方法
创建 IndexedDB
在使用 IndexedDB 之前，首先需要创建一个数据库。我们可以使用以下代码来创建一个名为 myDatabase 的数据库：
// javascriptcn.com 代码示例
const request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
console.log('Database error: ' + event.target.errorCode);
};
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
};上面的代码创建了一个名为 myDatabase 的数据库，并创建了一个名为 myObjectStore 的对象存储。对象存储中的每个对象都有一个唯一的 id 属性，并且可以通过 name 和 email 属性进行索引。
添加数据到 IndexedDB
添加数据到 IndexedDB 非常简单，我们可以使用以下代码来添加一个名为 John Doe 的用户：
// javascriptcn.com 代码示例
const request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
console.log('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const user = { id: 1, name: 'John Doe', email: 'john@example.com' };
const request = objectStore.add(user);
request.onsuccess = function(event) {
console.log('User added to database');
};
};从 IndexedDB 中读取数据
从 IndexedDB 中读取数据也非常简单，我们可以使用以下代码来读取名为 John Doe 的用户：
// javascriptcn.com 代码示例
const request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
console.log('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readonly');
const objectStore = transaction.objectStore('myObjectStore');
const index = objectStore.index('name');
const request = index.get('John Doe');
request.onsuccess = function(event) {
const user = event.target.result;
console.log(user.email);
};
};更新 IndexedDB 中的数据
更新 IndexedDB 中的数据也非常简单，我们可以使用以下代码来更新名为 John Doe 的用户的 email：
// javascriptcn.com 代码示例
const request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
console.log('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const index = objectStore.index('name');
const request = index.get('John Doe');
request.onsuccess = function(event) {
const user = event.target.result;
user.email = 'new-email@example.com';
const updateRequest = objectStore.put(user);
updateRequest.onsuccess = function(event) {
console.log('User updated');
};
};
};从 IndexedDB 中删除数据
从 IndexedDB 中删除数据也非常简单，我们可以使用以下代码来删除名为 John Doe 的用户：
// javascriptcn.com 代码示例
const request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
console.log('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const index = objectStore.index('name');
const request = index.get('John Doe');
request.onsuccess = function(event) {
const user = event.target.result;
const deleteRequest = objectStore.delete(user.id);
deleteRequest.onsuccess = function(event) {
console.log('User deleted');
};
};
};总结
IndexedDB 是一种非常强大的浏览器内置数据库，可以在 PWA 应用程序中实现离线存储和离线读取。在使用 IndexedDB 时，我们需要注意以下几点：
- 创建数据库和对象存储时需要指定版本号；
- 添加、读取、更新和删除数据时需要先创建事务；
- 对象存储中的每个对象都需要有一个唯一的键。
希望本文对大家了解 PWA 中的 IndexedDB 和离线存储有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65815d4ed2f5e1655dc8fbea