IndexedDB 是前端实现大型低代码看板草稿自动保存最合适的本地存储方案——它支持结构化数据、事务机制、异步操作和较大容量（通常 50MB~数 GB），能可靠存下含组件配置、布局关系、绑定逻辑的完整看板草稿。
用 IndexedDB 存什么？明确草稿数据结构
低代码看板草稿不是纯 JSON 字符串，而是多实体关联的数据集合。建议拆解为几个核心 ObjectStore：
- boards：存看板元信息（id、名称、创建时间、最后修改时间）
- components：存每个组件实例（id、type、props、x/y/width/height、绑定字段等）
- connections：存组件间连线/依赖关系（sourceId → targetId，用于数据流或事件触发）
- drafts_meta：存当前编辑状态（如 activeBoardId、unsavedChanges、autoSaveTimestamp）
这样设计便于增量更新、按需读取，也避免单条记录过大导致 IndexedDB 操作失败（比如一个含上百组件的看板直接塞进一个字段里）。
监听变更 + 节流写入：避免高频写库拖慢编辑体验
用户拖拽组件、改属性、连线条时，不要每次操作都立刻写 IndexedDB——既浪费资源，又可能因并发写入出错。推荐用「防抖 + 批量事务」策略：
- 用
setTimeout防抖（例如 800ms），把多次变更合并成一次提交 - 在防抖回调中，开启一个
readwrite事务，一次性写入 components 和 connections 的变更（利用 keyPath 和 index 定位更新） - 同时更新 boards 表中的
updatedAt和 drafts_meta 中的lastAutoSave
示例关键逻辑：
debounce(() => {<br> const tx = db.transaction(['components', 'connections', 'boards'], 'readwrite');<br> tx.objectStore('components').put(componentData);<br> tx.objectStore('connections').put(connection);<br> tx.objectStore('boards').put({ ...board, updatedAt: Date.now() });<br>}, 800)();
立即学习“Java免费学习笔记（深入）”；
离线优先 + 冲突预防：确保草稿不丢、不覆盖
用户可能关掉浏览器前没点“保存”，也可能在多个标签页同时编辑同一看板。要靠两个机制兜底：
-
beforeunload 监听：触发时强制执行一次同步写入，并标记
isDirty: true；页面恢复时检查该标记，提示“检测到未保存草稿” -
版本号 or 时间戳校验：每次读取草稿时记下
version或updatedAt；写入前比对服务端/其他标签页的最新值，若本地版本旧，弹窗提示“他人已更新，是否合并？”
不依赖 localStorage 做临时缓存——它容量小、无事务、易被清理，仅作为 IndexedDB 初始化失败时的降级 fallback。
初始化与错误兜底：让自动保存真正可靠
IndexedDB 打开失败（如用户禁用、配额超限）不能静默吞掉错误。必须有显式反馈路径：
- 打开 DB 时监听
onerror和onabort，降级到内存缓存 + 显式提示“本地保存不可用，请手动导出 JSON” - 每 24 小时清理一次过期草稿（比如
createdAt < Date.now() - 7 * 24 * 3600 * 1000），防止 DB 膨胀 - 提供「导出草稿」按钮，生成带时间戳的 JSON 文件，用户可手动备份
不复杂但容易忽略。
