IndexedDB 可高效存储大量结构化数据，通过 open 创建数据库，onupgradeneeded 定义对象仓库，事务机制支持读写操作，结合索引与游标优化查询性能。
在浏览器中存储大量结构化数据时，IndexedDB 是一个强大且高效的解决方案。它是一个低层 API，允许你在用户设备上直接保存键值对，支持复杂查询和事务处理，适合需要离线操作或高性能本地存储的应用场景。
创建并连接数据库
使用 IndexedDB 的第一步是打开或创建一个数据库。如果数据库不存在，IndexedDB 会自动创建它。
代码示例：
const request = indexedDB.open('MyAppDB', 1); request.onerror = (event) => { console.error('无法打开数据库'); }; request.onsuccess = (event) => { const db = event.target.result; console.log('数据库打开成功'); }; request.onupgradeneeded = (event) => { const db = event.target.result; if (!db.objectStoreNames.contains('items')) { db.createObjectStore('items', { keyPath: 'id', autoIncrement: true }); } };说明： 第一次打开数据库或版本升级时会触发 onupgradeneeded，在这里可以定义对象仓库（类似表）。
写入和读取数据
通过事务机制，你可以安全地插入、读取或更新数据。
添加数据：
function addItem(db, item) { const transaction = db.transaction(['items'], 'readwrite'); const store = transaction.objectStore('items'); const request = store.add(item); request.onsuccess = () => { console.log('数据已添加'); }; }读取数据：
function getItem(db, id) { const transaction = db.transaction(['items'], 'readonly'); const store = transaction.objectStore('items'); const request = store.get(id); request.onsuccess = (event) => { console.log('读取结果:', event.target.result); }; }
所有操作都基于事务，确保数据一致性。写操作需声明 'readwrite' 模式。
批量操作与索引优化查询
当数据量大时，建议使用游标遍历或批量插入，并建立索引来加速查找。
批量插入：
function addMultipleItems(db, items) { const transaction = db.transaction(['items'], 'readwrite'); const store = transaction.objectStore('items'); items.forEach(item => store.add(item)); transaction.oncomplete = () => { console.log(`${items.length} 条数据已插入`); }; }创建索引： 在 onupgradeneeded 中添加：
之后可通过索引快速查询：
const index = store.index('nameIndex'); index.getAll('Alice').onsuccess = (e) => { console.log('匹配结果:', e.target.result); };处理大量数据的实用建议
- 分批处理数据，避免阻塞主线程
- 使用游标（cursor）遍历大数据集，而不是一次性加载全部
- 合理设计主键和索引，提升查询效率
- 监听数据库版本变化，做好迁移逻辑
- 注意浏览器配额限制，必要时请求更大存储空间
基本上就这些。IndexedDB 虽然 API 稍显繁琐，但配合封装或使用库（如 idb）后能大幅提升开发效率。掌握核心流程后，管理大量结构化数据并不复杂，只是容易忽略事务生命周期和错误处理。
