HTML结构在离线环境下基于LocalForage的持久化容灾机制-html教程-PHP中文网

localforage 不支持 html 结构容灾，因其仅为存储封装层，无 dom 树保障机制；存 html 前须净化、异常捕获与校验，恢复时需类型判断、临时 dom 解析及编辑器适配，并主动探测引擎可用性与设置降级策略。

html结构在离线环境下基于localforage的持久化容灾机制

LocalForage 本身不直接支持 HTML 结构的“容灾”——它只是个 IndexedDB/WebSQL/LocalStorage 的统一封装层，存不了 DOM 树或 innerHTML 字符串的“结构完整性”保障机制。真要离线保存 HTML 片段并防丢、防损、可恢复，得靠你手动设计容灾逻辑，而不是指望 LocalForage 自带。

为什么 LocalForage 存 HTML 容易出问题

LocalForage 默认序列化值用 JSON.stringify()，但 HTML 字符串里常含非法 JSON 字符（如未转义的双引号、控制字符）、<script></script> 标签、内联事件（onclick="..."）等，直接 setItem('html-draft', el.innerHTML) 可能被截断或解析失败；更麻烦的是，它不校验写入是否成功——QuotaExceededError 静默吞掉，用户无感知。

存 HTML 前必须做的三件事

不是调 localforage.setItem() 就完事，得先处理内容和异常：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用 DOMPurify.sanitize() 过滤 HTML，去掉 script、on\* 属性、data: URL 等危险片段，避免后续 innerHTML = ... 执行恶意代码，也减少字符串体积

加 try/catch 包裹写入，并检查返回 promise 是否 reject：

try {
  await localforage.setItem('draft-html', cleanHtml);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    // 降级：改用 localStorage（容量小但更稳定）或提示用户清理
  }
}

存时附带时间戳和校验字段，比如：{ html: cleanHtml, savedAt: Date.now(), checksum: md5(cleanHtml) }，恢复前比对 checksum，防止磁盘损坏或中途写入中断导致 HTML 残缺

恢复 HTML 时不能直接 innerHTML = getItem()

从 LocalForage 读出来的可能是 null、空字符串，或 JSON 解析失败后的 undefined —— 直接赋给 innerHTML 会清空整个容器，甚至触发 XSS（如果之前没净化）。正确做法是：

始终用 await localforage.getItem('draft-html')，判断返回值类型：typeof result === 'string' && result.trim().length > 0
恢复前先创建临时 DOM：const temp = document.createElement('div'); temp.innerHTML = cleanHtml;，再用 temp.firstElementChild 或 temp.children 安全插入，避免把文本节点、注释节点一并塞进去
如果页面有富文本编辑器（如 Slate、ProseMirror），别用 innerHTML，走编辑器自己的导入 API（如 editor.commands.setContent(...)），否则光标位置、撤销栈全乱

容灾 ≠ 多存几份，而是明确 fallback 路径

LocalForage 底层引擎（IndexedDB）在 Chrome 私密模式、某些 Android WebView 下可能被禁用，此时 setItem() 会 fallback 到 localStorage，但容量只剩 5MB 且同步阻塞。你得提前测、提前兜底：

初始化时跑一次探测：localforage.setItem('test', 'ok').then(() => { /* 可用 */ }).catch(() => { /* 降级到 sessionStorage 或内存缓存 */ })
不要只依赖一个 key，比如同时存 'draft-html' 和 'draft-html-backup'，后者用更简化的格式（只存 textContent + class 名），确保极端情况下至少能恢复可读文字
用户主动点击“保存草稿”时，才触发完整流程；日常编辑用防抖 + sessionStorage 缓存最近 30 秒内容，避免频繁写 IndexedDB 影响性能

真正难的不是存，是判断“这一份 HTML 还能不能用”。浏览器不会告诉你 DOM 树是否已损坏，只能靠你加 checksum、做 parse 校验、设 fallback 层级——这些都得自己写，LocalForage 不管。