MDN项目：深入理解IndexedDB API - 浏览器端结构化数据存储方案

什么是IndexedDB？

IndexedDB是一种现代浏览器提供的底层API，用于在客户端存储大量结构化数据。与传统的Web Storage（如localStorage）相比，它具有更强大的功能和更高的性能表现。

核心特点

1. 对象存储：不像关系型数据库使用表格，IndexedDB直接存储JavaScript对象
2. 索引支持：可以创建索引实现高效查询
3. 事务支持：所有操作都在事务中完成，保证数据一致性
4. 异步操作：不会阻塞主线程
5. 大容量存储：适合存储大量数据，包括文件/二进制数据

为什么需要IndexedDB？

当开发者需要：

• 存储超过几MB的结构化数据
• 需要复杂查询能力
• 要求高性能数据访问
• 离线应用数据持久化

传统Web Storage就显得力不从心，这时IndexedDB就是理想选择。

核心概念解析

1. 数据库与对象存储

IndexedDB采用分层结构：

• 一个源（域名）可以创建多个数据库
• 每个数据库包含多个对象存储（类似表）
• 对象存储中包含多个对象记录

2. 键与索引

• 每个对象必须有一个唯一键（key）
• 可以创建辅助索引（index）加速查询
• 支持键范围查询

3. 事务模型

所有操作必须通过事务进行，支持：

• 只读事务（性能更好）
• 读写事务（数据修改）

基本使用流程

1. 打开数据库

const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  // 数据库初始化或升级
  const db = event.target.result;
  const store = db.createObjectStore('books', { keyPath: 'isbn' });
  store.createIndex('by_title', 'title', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  // 数据库操作...
};

2. 数据操作

添加数据：

const transaction = db.transaction('books', 'readwrite');
const store = transaction.objectStore('books');
store.add({ isbn: '123', title: 'JavaScript指南', author: '张三' });

查询数据：

const transaction = db.transaction('books', 'readonly');
const store = transaction.objectStore('books');
const request = store.get('123');

request.onsuccess = (event) => {
  console.log(event.target.result);
};

3. 使用索引查询

const index = store.index('by_title');
const request = index.get('JavaScript指南');

高级特性

游标遍历

const request = store.openCursor();
request.onsuccess = (event) => {
  const cursor = event.target.result;
  if (cursor) {
    console.log(cursor.value);
    cursor.continue();
  }
};

键范围查询

const range = IDBKeyRange.bound('100', '200');
const request = store.openCursor(range);

实际应用场景

1. 离线Web应用：存储应用数据实现离线功能
2. 缓存大型数据集：如产品目录、用户数据
3. 富媒体应用：存储图片、音频等二进制数据
4. 游戏：保存游戏状态和资源

浏览器兼容性与限制

几乎所有现代浏览器都支持IndexedDB，但需要注意：

• 不同浏览器有不同的存储配额
• 隐私模式下可能有限制
• 遵循同源策略

最佳实践

1. 错误处理：始终监听error事件
2. 事务管理：合理规划事务范围
3. 版本升级：设计好数据库迁移策略
4. 性能优化：合理使用索引，避免全表扫描

总结

IndexedDB为Web开发者提供了强大的客户端数据存储能力，特别适合需要处理大量结构化数据的应用场景。虽然学习曲线较陡峭，但掌握后能极大提升Web应用的能力和用户体验。

对于想深入学习的开发者，建议从简单示例开始，逐步构建更复杂的应用，同时注意遵循事务模式和错误处理的最佳实践。