html5浏览器数据库

HTML5浏览器数据库（IndexedDB）详解

基本概念

IndexedDB 是 HTML5 提供的浏览器内置数据库，用于在用户浏览器中存储大量结构化数据，它支持异步操作、事务处理，并允许存储复杂数据类型（如对象、数组），与 localStorage 不同，IndexedDB 提供更强大的数据管理能力,适合存储海量数据。

核心特性

API 核心方法

操作流程示例

1. 打开数据库

   const request = indexedDB.open('myDatabase', 1);
   request.onsuccess = (event) => {
       const db = event.target.result;
       // 操作数据库（事务、增删改查）
   };

2. 创建对象仓库

   

   db.onupgradeneeded = (event) => {
       const db = event.target.result;
       const objectStore = db.createObjectStore('users', { keyPath: 'id' });
       objectStore.createIndex('name', 'name', { unique: false });
   };

3. 事务与数据操作

   const transaction = db.transaction(['users'], 'readwrite');
   const objectStore = transaction.objectStore('users');
   // 添加数据
   objectStore.add({ id: 1, name: 'Alice', age: 25 });
   // 查询数据
   objectStore.get(1).onsuccess = (event) => {
       console.log(event.target.result); // 输出 { id: 1, name: 'Alice', age: 25 }
   };

适用场景

1. 离线应用：存储用户数据，实现断网后继续使用（如笔记应用）。
2. 缓存数据：减少网络请求，提升性能（如缓存 API 响应）。
3. 复杂数据管理：需要关联查询、事务支持的场景（如多表结构）。
4. 大文件存储：存储二进制文件（如图片、视频，结合 Blob 或 ArrayBuffer）。

注意事项

• 浏览器兼容性：IE 10+ 支持,移动端需注意旧版本浏览器兼容性。
• 存储空间限制：部分浏览器对 IndexedDB 有配额限制（可通过 navigator.storage.quota 查询）。
• 数据同步：需自行处理多设备/多窗口间的数据同步问题。
• 性能优化：避免频繁创建事务,尽量合并操作。

相关问题与解答

问题 1：IndexedDB 与 localStorage 的区别是什么？

解答：
| 特性 | IndexedDB | localStorage |
|————————-|—————————————|———————————-|
| 数据类型 | 支持对象、数组等复杂结构 | 仅支持字符串 |
| 存储容量 | 更大（默认 50MB+，可扩展） | 较小（5MB） |
| API 特性 | 支持事务、索引、游标查询 | 仅提供简单的 get/set/remove |
| 适用场景 | 复杂数据管理、离线应用 | 简单键值存储（如配置信息） |

问题 2：如何确保 IndexedDB 数据的跨浏览器兼容性？

解答：

1. 检测 API 支持：

   if (!window.indexedDB) {
       // 降级处理（如提示用户浏览器不支持）
   }

2. 处理版本升级：

   • 在 onupgradeneeded 事件中检查数据库版本,迁移旧数据。
   • 示例：

     db.onupgradeneeded = (event) => {
         const db = event.target.result;
         if (event.oldVersion < 2) {
             // 迁移逻辑（如新增对象仓库）
         }
     };

3. Polyfill 方案：

   • 使用第三方库（如 idb）封装 IndexedDB