JavaScript 中怎么使用 IndexedDB 缓存大规模的产品分类目录层级数据-js教程-PHP中文网

indexeddb 缓存大规模分类目录的核心是按节点建模、分批写入、路径前缀或 parentid 索引实现高效树形查询，并配合版本控制与内存缓存提升一致性与性能。

javascript 中怎么使用 indexeddb 缓存大规模的产品分类目录层级数据

用 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 

<h3>分批导入避免阻塞与内存溢出</h3>
<p>万级节点一次性 add() 会卡死 UI 或触发事务超时。应拆成 100–500 条/批，用递归或 Promise 队列控制节奏：</p>

用 transaction.oncomplete 触发下一批，而非 setTimeout 模拟
每批事务限制在 1 秒内完成（IndexedDB 默认超时约 60 秒，但长事务易被中断）
导入前先 clear() 原有数据，再逐批写入，避免残留脏数据
可加 loading 状态 + 进度条反馈，比如每完成 1000 条更新一次 UI

示例片段：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

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  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 本身不提供嵌套返回。