IndexedDB 与 Web Storage 是分工协作关系：localStorage 存轻量元数据（如用户 ID、开关状态），IndexedDB 存结构化业务数据（如商品列表、带附件笔记）；二者协同实现离线同步、多标签页一致性及高性能读写。

IndexedDB 和 Web Storage（localStorage/sessionStorage）不是替代关系，而是分工协作的组合。关键在于：用 Web Storage 存轻量元数据和控制开关，用 IndexedDB 存结构化业务数据——这样既发挥各自优势，又规避单点瓶颈。

明确分工：什么该存 localStorage，什么必须进 IndexedDB

localStorage 适合放小、稳、快的数据，比如当前用户 ID、主题偏好、缓存版本号、离线开关状态；IndexedDB 则负责商品列表、聊天记录、表单草稿、带附件的笔记等结构复杂、体积大、需查询或事务保障的数据。

• localStorage 示例：localStorage.setItem('lastSyncTime', Date.now())、localStorage.setItem('isOfflineMode', 'true')
• IndexedDB 示例：一条含 title、content、tags、createdAt、attachments（Blob）的笔记记录；一个含 price、stock、images、category 的商品对象
• 避免把整个数组 JSON.stringify 后塞进 localStorage——超过 2MB 就可能触发卡顿，且无法按字段查、无法事务回滚

协同读写：用 localStorage 做 IndexedDB 的“轻量代理”

不直接暴露 IndexedDB 的打开、事务、错误处理逻辑给业务层，而是封装一层统一入口，内部用 localStorage 缓存关键状态，降低高频访问开销。

• 首次加载时，从 localStorage 读取 dbVersion 和 schemaReady 标志，快速判断是否需要初始化 IndexedDB
• 在 IndexedDB 写入成功后，同步更新 localStorage 中的 lastWriteTime 和 pendingCount（待同步条目数），供 UI 快速反馈
• 当用户切换标签页时，监听 storage 事件，用 localStorage 变更作为信号，触发本页 IndexedDB 状态刷新（如重新拉取未读消息数）

离线同步策略：靠两者配合实现“无感同步”

真正的离线体验不只靠存得住，更靠“断网时能操作、联网后自动对齐”。这需要 Web Storage 提供控制锚点，IndexedDB 提供数据底座。

• 所有写操作先写入 IndexedDB，并打上 status: 'pending' 标记；同时在 localStorage 记录 pendingQueue = ['task-123', 'note-456']
• 网络恢复时，监听 online 事件，遍历 localStorage 中的 pending 列表，逐条提交到服务端；成功后更新 IndexedDB 中对应记录的 status，并从 localStorage 清除条目
• 冲突处理可借助 localStorage 存 lastModified 时间戳，在 IndexedDB 查询时做客户端合并（如“服务端时间 > 本地时间”则覆盖本地）

多标签页一致性：用 localStorage + IndexedDB 事件桥接

IndexedDB 本身不广播变更，不同标签页无法感知彼此写入。这时 localStorage 的 storage 事件就是低成本通信信道。

• 在一个标签页完成 IndexedDB 写入后，立即执行 localStorage.setItem('syncTrigger', Date.now().toString())
• 其他标签页监听 window.addEventListener('storage', e => { if (e.key === 'syncTrigger') refreshFromIDB() })
• 避免直接在 storage 事件里读写 IndexedDB（可能并发冲突），改为触发防抖后的重新加载逻辑