使用 IndexedDB 实现客户端数据存储_indexeddb 存储-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45474825/article/details/145307749

在现代 Web 开发中，客户端数据存储变得越来越重要。无论是为了提升用户体验，还是为了实现离线功能，我们都需要一种可靠的方式来存储数据。localStorage 虽然简单易用，但它的存储容量有限（通常为 5MB），且不适合存储结构化数据。这时，IndexedDB 就派上用场了。

IndexedDB 是一种低级别的 API，允许我们在客户端存储大量结构化数据。它支持异步操作、事务、索引等功能，非常适合存储复杂的数据。本文将通过一个简单的示例，带你快速上手 IndexedDB。

1. IndexedDB 是什么？

IndexedDB 是一个基于键值对的 NoSQL 数据库，允许你在浏览器中存储大量结构化数据。它的主要特点包括：

异步操作：所有操作都是异步的，不会阻塞主线程。
事务支持：确保数据操作的原子性和一致性。
索引：支持创建索引，提升查询效率。
大容量存储：可以存储远超 localStorage 限制的数据。

2. 示例代码解析

以下是一个简单的 IndexedDB 示例代码，展示了如何创建数据库、插入数据、查询数据和更新数据。

2.1 打开或创建数据库

var request = indexedDB.open('myDatabase', 1);

indexedDB.open('myDatabase', 1)：打开名为 myDatabase 的数据库，如果不存在则创建它。1 是数据库的版本号，当数据库结构发生变化时，可以通过增加版本号来触发 onupgradeneeded 事件。

2.2 创建对象存储和索引

request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 创建对象存储（类似于表），设置主键为 'id'
  var objectStore = db.createObjectStore('customers', { keyPath: 'id' });

  // 为 'name' 字段创建索引
  objectStore.createIndex('name', 'name', { unique: false });
};

db.createObjectStore('customers', { keyPath: 'id' })：创建一个名为 customers 的对象存储，并设置 id 为主键。
objectStore.createIndex('name', 'name', { unique: false })：为 name 字段创建索引，方便后续查询。

2.3 插入数据

request.onsuccess = function(event) {
  var db = event.target.result;

  // 插入数据
  var transaction = db.transaction(['customers'], 'readwrite');
  var objectStore = transaction.objectStore('customers');
  objectStore.add({ id: 1, name: 'John Doe', email: 'john@example.com' });
  objectStore.add({ id: 2, name: 'Jane Doe', email: 'jane@example.com' });

  transaction.oncomplete = function() {
    console.log('Transaction completed: data added.');
  };

  transaction.onerror = function(event) {
    console.error('Transaction failed:', event);
  };
};

db.transaction(['customers'], 'readwrite')：创建一个读写事务，操作 customers 对象存储。
objectStore.add({ id: 1, name: 'John Doe', email: 'john@example.com' })：向对象存储中插入一条数据。

2.4 查询数据

// 查询数据
var queryTransaction = db.transaction(['customers']);
var queryObjectStore = queryTransaction.objectStore('customers');
var query = queryObjectStore.get(1);

query.onsuccess = function(event) {
  console.log('Customer:', event.target.result);
};

queryObjectStore.get(1)：根据主键 id 查询数据。
event.target.result：返回查询到的数据。

2.5 更新数据

// 更新数据
var updateTransaction = db.transaction(['customers'], 'readwrite');
var updateObjectStore = updateTransaction.objectStore('customers');
var updatedCustomer = { id: 1, name: 'John Smith', email: 'johnsmith@example.com' };

updateObjectStore.put(updatedCustomer);

updateTransaction.oncomplete = function() {
  console.log('Transaction completed: data updated.');
};

updateObjectStore.put(updatedCustomer)：更新数据。如果数据不存在，则会插入新数据。

2.6 错误处理

request.onerror = function(event) {
  console.error('Database error:', event.target.error);
};

如果数据库操作失败，会触发 onerror 事件，并输出错误信息。

3. 总结

通过以上示例，我们学习了如何使用 IndexedDB 创建数据库、插入数据、查询数据和更新数据。IndexedDB 虽然比 localStorage 复杂，但它提供了更强大的功能，适合存储大量结构化数据。

适用场景

离线应用：存储数据供离线使用。
缓存：缓存 API 响应，减少服务器请求。
复杂数据存储：存储结构化数据，支持高效查询。

注意事项

兼容性：现代浏览器普遍支持 IndexedDB，但旧版浏览器可能不支持。
错误处理：务必妥善处理异步操作中的错误。
性能优化：数据量大时，需优化索引和查询。

希望本文能帮助你快速上手 IndexedDB。如果你有任何问题或建议，欢迎在评论区留言！

参考文档：

关注我，获取更多前端技术干货！