IndexedDB 是浏览器中支持大规模数据存储的核心方案，适用于结构化数据的异步读写，配合分页加载、索引优化和 Web Worker 可有效管理上百 MB 数据。
浏览器的 Storage API 本身并不适合大规模数据存储，但通过合理选择和组合不同的 API，可以在一定程度上支持较大体量的数据。关键在于理解各 API 的限制与优势，并根据实际场景做出取舍。
了解不同 Storage API 的能力与限制
浏览器提供了多种客户端存储方式，每种都有其适用范围：
- localStorage：最大约 5–10MB，只能存字符串，同步操作，不适合大量数据。
- sessionStorage：类似 localStorage，但生命周期仅限于会话，容量相同。
- IndexedDB：支持数百 MB 到数 GB（取决于浏览器和设备），可存储对象、二进制数据，异步操作，适合大规模结构化数据。
- Cache API：主要用于缓存网络请求，适合资源文件，也可间接用于数据存储。
- File System Access API（实验性）：允许读写用户指定的本地文件，适合超大文件，但需用户授权。
真正能支撑“大规模”数据的是 IndexedDB 和 File System Access API。
使用 IndexedDB 存储大量结构化数据
IndexedDB 是目前最成熟的客户端大规模存储方案。它是一个事务型、基于索引的数据库，支持对象存储和游标遍历。
- 打开数据库并创建对象仓库：
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('items')) {
db.createObjectStore('items', { keyPath: 'id' });
}
};
- 批量写入数据时使用事务：
const store = transaction.objectStore('items');
dataList.forEach(item => store.add(item));
transaction.commit();
- 分页读取避免内存溢出：
使用游标或键范围分批加载数据，而不是一次性取出全部记录。
处理超大数据或文件：考虑 Cache 或文件系统
如果数据是图片、视频或大型 JSON 导出文件，可以结合 Cache API 或 File System Access API。
- 将大文件以 Blob 形式保存到 Cache 中，通过 request URL 模拟存储。
- 使用 window.showSaveFilePicker() 让用户选择本地路径保存数据文件，实现“持久化落地”。
- 读取时通过 showOpenFilePicker() 加载大文件，避免全量加载到内存。
这种方式绕开了浏览器配额限制，适合编辑文档、离线应用等场景。
优化策略与注意事项
即使使用 IndexedDB，仍需注意性能和稳定性：
- 避免在主线程执行大量数据操作，可使用 Web Worker 配合 IndexedDB。
- 对频繁查询的字段建立索引，加快检索速度。
- 监控存储用量，提示用户清理或导出数据。
- 提供导出为 JSON 文件或导入的功能，增强数据可迁移性。
- 注意浏览器的存储配额机制，Chrome 中可通过 navigator.storage.estimate() 获取使用情况。
基本上就这些。IndexedDB 是大规模存储的核心工具，配合合理的架构设计，能在浏览器中稳定管理几十甚至上百 MB 的数据。不复杂但容易忽略的是分片处理和内存控制。
