IndexedDB 缓存大规模分类目录的核心是按节点建模、分批写入、路径前缀或 parentId 索引实现高效树形查询，并配合版本控制与内存缓存提升一致性与性能。
用 IndexedDB 缓存大规模产品分类目录层级数据，核心是合理设计对象存储（objectStore）结构、分批写入、支持快速查询与树形遍历。它比 localStorage 更适合结构化、高频读写、体积较大的分类数据（比如上万节点的多级类目树）。
设计适合层级查询的 objectStore 结构
不要把整棵树塞进一个 record，而是按“节点”建模，每个分类项作为独立记录，并通过字段显式表达层级关系：
- id：唯一标识（如 category_123），建议用字符串，便于索引和关联
- name：分类名称
- parentId：父级 id（根节点设为 null 或 ''）
- level：层级深度（可选，方便筛选某一层级）
- path：路径字符串（如 "001/005/023"），支持前缀查询（例如查所有二级子类：index.openCursor(IDBKeyRange.bound('001/', '001/zzz'))）
- sortOrder：排序权重，用于客户端稳定排序
创建时启用多个索引提升查询效率：
// 示例：升级数据库时定义
if (event.oldVersion < 1) {
const store = db.createObjectStore('categories', { keyPath: 'id' });
store.createIndex('by_parent', 'parentId', { unique: false });
store.createIndex('by_path', 'path', { unique: false });
store.createIndex('by_level', 'level', { unique: false });
}
分批导入避免阻塞与内存溢出
万级节点一次性 add() 会卡死 UI 或触发事务超时。应拆成 100–500 条/批，用递归或 Promise 队列控制节奏：
立即学习“Java免费学习笔记（深入）”；
- 用 transaction.oncomplete 触发下一批，而非 setTimeout 模拟
- 每批事务限制在 1 秒内完成（IndexedDB 默认超时约 60 秒，但长事务易被中断）
- 导入前先 clear() 原有数据，再逐批写入，避免残留脏数据
- 可加 loading 状态 + 进度条反馈，比如每完成 1000 条更新一次 UI
示例片段：
function batchAddCategories(db, categories, batchSize = 200) {
return new Promise((resolve) => {
let offset = 0;
function nextBatch() {
const batch = categories.slice(offset, offset + batchSize);
const tx = db.transaction('categories', 'readwrite');
const store = tx.objectStore('categories');
batch.forEach(cat => store.add(cat));
tx.oncomplete = () => {
offset += batchSize;
if (offset < categories.length) nextBatch();
else resolve();
};
tx.onerror = () => reject(tx.error);
}
nextBatch();
});
}
高效查询任意层级子树
常见需求如“获取 ID 为 X 的分类及其全部子孙”，不能靠多次 get() 递归（IO 太多）。推荐两种策略：
-
路径前缀法：若节点含 path 字段（如 root/100/205/301），查子孙只需
index.get(IDBKeyRange.bound(cat.path + '/', cat.path + 'zzz')) - parentId 递归法：对无 path 的结构，先用 by_parent 索引查直接子节点，再用 Promise.all 并行查下一层，控制递归深度防栈溢出（一般不超过 6 层）
注意：查询结果需手动组装为树结构（用 Map 缓存 id → node，再遍历挂载 children），IndexedDB 本身不提供嵌套返回。
缓存更新与失效策略
分类目录通常变更低频但影响大，需兼顾一致性与性能：
- 服务端返回新数据时，带 version 时间戳或 hash，前端对比决定是否全量更新
- 避免局部更新——单个分类修改可能影响整个子树 path 或 level，全量覆盖更安全
- 可加一层内存缓存（Map）存放常用子树，减少重复 DB 查询；页面卸载前清空或定期刷新
- 监听 indexeddb 的 onupgradeneeded，版本升级时迁移旧数据或重建索引
不复杂但容易忽略：首次加载时用 async/await + try/catch 包裹打开 DB 和读取逻辑，降级到 API 请求兜底，避免白屏。
