离线环境下基于IndexedDB的DOM节点持久化方案

先说几个核心问题：直接存储 element.outerHTML 会导致用户实时状态丢失，正确的做法是提取可序列化的关键状态（例如 input.value、光标偏移量、uiState），以结构化方式存入 IndexedDB，同时针对大型 HTML 实施分层处理、防抖保存机制与显式事务控制，并在数据恢复时同步还原 DOM 状态与事件绑定。

直接存 element.outerHTML 会丢状态，别这么干

许多开发者习惯性地将整个 DOM 快照序列化为 HTML 字符串后存入 IndexedDB，例如使用 document.body.outerHTML。虽然 DOM 结构可以还原，但大量关键信息会丢失：input 的当前输入值、checkbox 的选中状态、contenteditable 元素内的光标位置、动态添加的 class 或 dataset 属性——这些均不在 outerHTML 的覆盖范围内。更棘手的是，若页面基于 React、Vue 等框架构建，outerHTML 甚至无法反映真实的渲染结果。

真正需要持久化的，不是“页面看起来什么样”，而是“用户当前操作到了哪一步”。因此必须提取可序列化的状态数据，而非直接 dump 渲染快照。

• 通过 input.value、textarea.value、select.value 显式读取表单控件的当前值
• 遍历带有 contenteditable="true" 属性的节点，利用 getSelection() 与 range.toString() 记录光标位置或选区范围（也可仅存储 textContent 加上光标偏移量）
• 对于自定义 UI 状态（如折叠面板的展开项、tab 的激活索引），统一收集到一个 uiState 对象中集中管理

结构化存储比扁平字符串更可靠，字段设计有讲究

IndexedDB 并非简单的键值对容器，objectStore 的 schema 设计直接决定了后续的查询效率与维护成本。在草稿类场景中，推荐至少包含以下几个字段：

• id：使用 crypto.randomUUID() 生成，避免采用时间戳或递增数字（多端写入时冲突风险较高）
• htmlSnapshot：仅存储经过净化处理的 HTML 片段（需过滤掉 inline script 与 style，防止 XSS 攻击）
• formValues：对象类型，键为表单元素的 name 或 id，值为对应的当前输入值
• uiState：对象类型，包含 scrollTop、activeTab、expandedSections 等 UI 状态信息
• metadata：包含 createdAt、lastModified、isDirty（用于判断是否需要强制保存）等元数据

按照这种结构设计后，你可以基于 lastModified 建立索引实现倒序列表展示，也能通过 formValues.email 进行条件查询——这些操作使用纯字符串存储根本无法实现。

事务失败常见于大 HTML 字符串，得拆解+防抖

直接调用 put() 写入一个数 MB 的 HTML 字符串，很容易触发 QuotaExceededError（尤其在 Safari 或低配置 Android 设备上）。IndexedDB 的实际可用空间通常远低于理论值，且会受到浏览器策略的动态限制。

解决方案不是强行写入，而是采用分层处理策略：

• 当 htmlSnapshot 超过 50KB 时，先通过 new Blob([htmlString]) 将其转换为 Blob 对象，再使用 put() 存入独立的 blobs objectStore，主记录只保留 blobKey 引用
• 编辑过程中不必每次按键都触发写入操作，使用 debounce(1500) 包裹保存逻辑，同时监听 beforeunload 事件作为兜底保障
• 事务必须显式执行 await tx.complete 或捕获 tx.onabort 事件，否则失败会被静默忽略，导致数据丢失

恢复 DOM 时不能直接 innerHTML，得补状态

从 IndexedDB 读取数据后，仅使用 el.innerHTML = data.htmlSnapshot 是远远不够的。虽然 DOM 节点被重建了，但所有动态状态仍然停留在初始值。

必须同步执行状态还原：

• 遍历 formValues，根据每个 name 查找对应的表单控件，依次设置 .value、.checked、.selected 属性
• 对于 contenteditable 区域，使用 Range 和 Selection API 恢复光标位置（前提是已提前存储了偏移量）
• 执行 uiState 中记录的滚动、展开等操作，例如 el.scrollTop = uiState.scrollTop

最容易被忽视的是事件绑定——恢复后的 DOM 是全新节点，原先附加的事件监听器全部丢失。解决方案有两种：要么采用事件委托机制，要么在 DOM 恢复后重新初始化组件实例。