用 IndexedDB 实现持久化数据存储

2023-10-13 17:30:13

IndexedDB 是 HTML5 规范中定义的一种低级 API，它允许 Web 应用程序在客户端存储大量结构化数据。它是一种持久化数据存储机制，意味着即使浏览器窗口关闭或设备重新启动，数据仍会保留。IndexedDB 非常适合存储需要长期保存的大型数据，例如用户配置文件、离线数据和缓存内容。

优点

IndexedDB 具有以下优点：

存储空间大：没有存储上限，一般来说不小于 250M
存储格式多样：支持字符串存储、支持二进制存储（ArrayBuffer 对象和 Blob 对象）
性能优异：使用索引来提高查询速度
安全可靠：数据存储在浏览器沙箱中，受到浏览器的保护
浏览器兼容性好：除 IE 和 Safari 外，其他主流浏览器都支持 IndexedDB

使用

使用 IndexedDB 需要用到编程接口，主要包括以下几个对象：

IDBFactory：用于创建 IDBDatabase 对象
IDBDatabase：代表一个数据库，包含了存储的数据
IDBTransaction：代表一个事务，用于对数据库进行读写操作
IDBObjectStore：代表一个对象存储，是数据存储的基本单位
IDBIndex：代表一个索引，用于加速对数据的查询

代码示例

以下是使用 IndexedDB 存储数据的代码示例：

// 创建数据库
const request = window.indexedDB.open('myDatabase', 1);

// 数据库创建成功后的回调函数
request.onsuccess = function(event) {
  const db = event.target.result;

  // 创建事务
  const transaction = db.transaction(['myObjectStore'], 'readwrite');

  // 创建对象存储
  const objectStore = transaction.objectStore('myObjectStore');

  // 添加数据
  const data = {
    name: 'John Doe',
    age: 30
  };

  const request = objectStore.add(data);

  // 数据添加成功后的回调函数
  request.onsuccess = function(event) {
    console.log('Data added successfully');
  };

  // 事务完成后的回调函数
  transaction.oncomplete = function(event) {
    console.log('Transaction completed successfully');
  };
};

// 数据库创建失败后的回调函数
request.onerror = function(event) {
  console.error('Error creating database');
};