IndexedDB是浏览器内置的NoSQL数据库，支持异步、事务型操作，适合存储大量结构化数据。它提供大容量存储、高效索引查询和事务一致性，优于localStorage的同步小容量限制，适用于离线应用与大规模缓存场景。
当需要在浏览器中存储大量结构化数据时，IndexedDB 是最佳选择。它不像 localStorage 那样受限于容量和同步操作，而是支持异步、事务型、基于对象的数据库系统，适合处理大规模数据，比如离线应用、日志记录、用户行为缓存等场景。
什么是 IndexedDB？
IndexedDB 是浏览器内置的 NoSQL 类型数据库，允许你在客户端存储大量结构化数据，包括数组、对象甚至二进制数据（如 Blob）。它支持索引查询，能高效检索成千上万条记录。
与 localStorage 相比，IndexedDB 的优势在于：
- 存储容量更大（通常为几十 MB 到数 GB，取决于浏览器和设备）
- 异步操作，不会阻塞主线程
- 支持事务机制，保证数据一致性
- 可建立索引，实现高效查询
基本使用流程
使用 IndexedDB 包括打开数据库、创建对象仓库、执行增删改查操作。以下是关键步骤：
立即学习“Java免费学习笔记（深入）”；
1. 打开或创建数据库通过 indexedDB.open() 方法打开数据库，如果不存在则会创建。
const request = indexedDB.open('MyDatabase', 1);
版本号用于触发升级逻辑，比如新建表或修改结构。
2. 创建对象仓库（Object Store）在 onupgradeneeded 回调中定义数据表结构（即对象仓库），并设置主键。
request.onupgradeneeded = function(event) {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
通过事务（transaction）向对象仓库插入数据。
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: 'Alice' });
可通过主键获取，也可使用游标遍历或索引查询。
const request = store.get(1);
request.onsuccess = function() {
console.log(request.result); // { id: 1, name: 'Alice' }
};
优化大规模数据管理
当处理成千上万条数据时，需注意性能和稳定性。
批量操作使用事务将多个操作放入一个事务中，减少开销。
例如批量添加：
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
usersArray.forEach(user => store.add(user));
对常用查询字段创建索引，避免全表扫描。
db.createObjectStore('users', { keyPath: 'id' });
store.createIndex('name_idx', 'name', { unique: false });
之后可用索引快速查找：
const index = store.index('name_idx');
const request = index.getAll('Alice');
避免一次性读取所有数据，使用游标或 keyRange 实现分页。
const range = IDBKeyRange.bound(100, 200);
const request = store.openCursor(range);
逐条处理结果，防止内存溢出。
兼容性与错误处理
IndexedDB 在现代浏览器中支持良好，但仍需处理异常和降级方案。
- 监听 open 请求的 error 和 blocked 事件
- 封装 Promise 或使用库（如 idb）简化 API 使用
- 提供 fallback 存储方案（如 localStorage 仅存小数据）
基本上就这些。IndexedDB 虽然 API 较复杂，但对大规模数据管理非常强大。掌握其核心机制后，可以构建高性能的离线 Web 应用。不复杂但容易忽略的是事务生命周期和游标使用细节。
