html5共有数据库

HTML5 IndexedDB 详细说明

基本概念

IndexedDB 是 HTML5 提供的浏览器端数据库解决方案，允许在用户浏览器中存储大量结构化数据（可超过 50MB），它是一个异步、事务型数据库系统，支持索引和复杂查询，适用于离线应用、数据缓存等场景。

核心特点

API 结构

IndexedDB 的操作围绕以下核心对象展开：

1. IDBDatabase：数据库实例,包含数据操作方法。
2. IDBObjectStore：类似表（Table）,用于存储数据。
3. IDBTransaction：事务对象,确保操作的原子性。
4. IDBKeyRange：定义键范围,用于查询。

操作步骤

打开数据库

const request = indexedDB.open('myDatabase', 1); // 版本号为 1
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' }); // 创建存储空间
  objectStore.createIndex('name', { unique: false }); // 创建辅助索引
};
request.onsuccess = (event) => {
  const db = event.target.result;
  // 后续操作...
};

添加数据

const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const data = { id: 1, name: 'Alice', age: 25 };
objectStore.add(data);
transaction.oncomplete = () => console.log('数据添加成功');

查询数据

const transaction = db.transaction(['users']);
const objectStore = transaction.objectStore('users');
const request = objectStore.get(1); // 按主键查询
request.onsuccess = () => console.log(request.result);

删除数据

const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
objectStore.delete(1); // 删除主键为 1 的数据

版本升级

当数据库版本号变化时，会自动触发 onupgradeneeded 事件,可通过以下方式迁移数据：

indexedDB.open('myDatabase', 2).onupgradeneeded = (event) => {
  const db = event.target.result;
  if (db.oldVersion === 1) {
    // 迁移逻辑，例如新增字段或索引
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    // 从旧数据复制到新结构...
  }
};

适用场景

注意事项

1. 浏览器兼容性：IE10+ 支持,现代浏览器已全面兼容。
2. 存储限制：部分浏览器对单个域名的 IndexedDB 存储有容量限制。
3. 数据同步：需自行实现与服务器的数据同步机制。
4. 隐私问题：数据存储在本地，需注意敏感信息保护（如加密存储）。

相关问题与解答

问题 1：IndexedDB 和 localStorage 有什么区别？

解答：
| 特性 | IndexedDB | localStorage |
|———————|————————————|——————————|
| 数据容量 | 可存储 GB 级数据（受限于浏览器） | 通常最大 5~10MB |
| 数据类型 | 支持对象、二进制数据（如 ArrayBuffer）| 仅支持字符串 |
| API | 异步操作，支持事务和索引 | 同步 API，操作简单 |
| 用途 | 复杂数据存储、离线应用 | 简单键值对存储（如配置缓存） |

问题 2：如何确保 IndexedDB 数据的实时性（与服务器同步）？

解答：

1. 乐观同步：客户端操作后立即更新界面，同时将变更记录发送到服务器，若同步失败，可标记为“待同步”状态。
2. 冲突解决：服务器返回最新数据时，对比版本号或时间戳,覆盖或合并客户端数据。
3. 定期同步：利用 IndexedDB 的事务日志或第三方库（如 Dexie.js）监听数据变化