九八云安全HTML5 事务存储（IndexedDB）详解
基本概念
IndexedDB 是 HTML5 提供的浏览器内置数据库，用于在客户端存储大量结构化数据，它支持异步操作、事务处理，并允许创建复杂数据模型，适用于离线应用、数据缓存等场景。
API 结构
IndexedDB 采用分层架构：
Database → Object Store → Record | 组件 | 说明 |
|---|---|
| Database | 数据库实例，包含多个对象仓库（Object Store） |
| Object Store | 类似表或集合，存储键值对数据，可定义索引 |
| Transaction | 事务对象，用于封装多个操作（如增删改查） |
| Cursor | 游标对象，用于遍历 Object Store 中的数据 |
操作步骤
-
打开数据库
const request = indexedDB.open('myDatabase', 1); -
创建对象仓库
request.onupgradeneeded = (event) => { const db = event.target.result; db.createObjectStore('users', { keyPath: 'id' }); }; -
数据操作
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: 'Alice' }); -
读取数据
const transaction = db.transaction(['users']); const store = transaction.objectStore('users'); const request = store.get(1); request.onsuccess = () => console.log(request.result); -
删除数据
store.delete(1);
-
更新数据
store.put({ id: 1, name: 'Bob' }); -
遍历数据
const cursor = store.openCursor(); cursor.onsuccess = (event) => { const result = event.target.result; if (result) { console.log(result.value); // 当前记录 result.continue(); // 继续遍历 } };
与其他存储对比
| 特性 | IndexedDB | localStorage/sessionStorage | Cookies |
|---|---|---|---|
| 数据容量 | 无限制（GB 级） | 5~10MB | 4KB |
| 数据结构 | 结构化（支持索引） | 键值对（字符串） | 键值对（字符串） |
| API 类型 | 异步 | 同步 | 同步 |
| 持久化 | 长期存储 | 长期存储（localStorage） | 长期存储 |
| 适用场景 | 复杂数据、离线应用 | 简单配置、临时数据 | 小规模状态保存 |
常见问题与解答
问题 1：如何选择 IndexedDB 或其他客户端存储？
- 选 IndexedDB：需存储大量结构化数据（如 JSON）、要求事务一致性、需要索引查询。
- 选 localStorage：仅需存储少量简单键值对（如用户偏好设置）。
- 选 Cookies：仅需存储极小数据（如会话标识）,且需自动发送到服务器。
问题 2：IndexedDB 的浏览器兼容性如何？
- 现代浏览器（Chrome, Firefox, Edge, Safari）均支持。
- IE10+ 部分支持，但存在功能限制。
- 可通过 Polyfill（如
idb库）兼容旧浏览器
