html5使用indexedDB存储大量结构化数据 html5使用客户端数据库的入门

IndexedDB 是 HTML5 提供的浏览器内置数据库，用于存储大量结构化数据，支持对象、数组、二进制等类型，采用异步 API 和事务机制，适合离线应用和本地缓存场景。

• 支持结构化数据：可存储对象、数组、日期、File、Blob 等复杂类型，突破 localStorage 的字符串限制。
• 异步 API：通过回调或 Promise 操作，避免阻塞 UI 线程。
• 事务机制：所有操作在事务中完成，保证数据一致性。
• 索引查询：支持创建索引，提升查询效率。
• 大容量存储：容量通常为几十 MB 到数 GB（依浏览器和设备而定）。

使用 indexedDB.open() 打开数据库，若不存在则创建。第二个参数为版本号，升级时需递增。

在 onupgradeneeded 事件中定义数据表（对象仓库）和索引：

所有操作需在事务（transaction）中进行，指定操作模式（readonly 或 readwrite）。

• 添加数据：

  request.onsuccess = (event) => { const db = event.target.result; const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.add({ id: 1, name: 'Alice', email: 'alice@example.com' }); transaction.oncomplete = () => console.log('数据已保存');};

• 读取数据：

  const transaction = db.transaction(['users'], 'readonly');const store = transaction.objectStore('users');const getRequest = store.get(1); // 按主键查询getRequest.onsuccess = () => { if (getRequest.result) console.log('找到用户:', getRequest.result); else console.log('未找到该用户');};

• 使用索引查询：

  const index = store.index('name'); // 通过索引查询const search = index.get('Alice');search.onsuccess = () => console.log('通过姓名查到:', search.result);

• 更新数据：

  store.put({ id: 1, name: 'Alice', email: 'newemail@example.com' }); // 替换整条记录

• 删除数据：

  store.delete(1); // 按主键删除

原生 API 较复杂，推荐使用封装库提升效率：

• idb：轻量级 Promise 封装。import { openDB } from 'idb';const db = await openDB('MyAppDB', 1, { upgrade(db) { db.createObjectStore('users', { keyPath: 'id' }); }});await db.add('users', { id: 1, name: 'Bob' });const user = await db.get('users', 1);
• Dexie.js：功能丰富，支持链式语法。const db = new Dexie('MyAppDB');db.version(1).stores({ users: 'id, name' });await db.users.add({ id: 1, name: 'Bob' });const user = await db.users.get(1);

• 错误处理：始终监听 error 和 success 事件，避免静默失败。
• 版本控制：数据库结构升级需在 onupgradeneeded 中修改，并递增版本号。
• 事务生命周期：事务在回调结束后自动关闭，不可跨异步操作使用。
• 兼容性：移动端和旧浏览器支持有限，可通过
  caniuse.com
  查询兼容性。
• 数据安全：敏感数据需加密后再存储。

• 离线应用：如 PWA（渐进式 Web 应用）的本地数据存储。
• 待同步数据：临时存储未上传到服务器的数据。
• 缓存优化：减少网络请求，提升页面加载速度。

掌握 IndexedDB 可显著提升 Web 应用的离线能力和性能表现，是管理复杂本地数据的理想方案。