直接存 document.body.innerHTML 会失败，因为它只保存静态 HTML 字符串，丢失运行时属性（如 checked、value）、动态节点、框架挂载内容及富文本编辑器状态，且隐私模式下 localStorage 可能静默失效。
离线环境下靠 localStorage 做 HTML 结构持久化容灾，不能只存原始 innerHTML 字符串——它会丢失事件绑定、动态状态、表单控件值（如 input.checked、select.selectedIndex），且无法处理富文本编辑器或 Shadow DOM 等结构。必须分层捕获、按需序列化、带上下文恢复。
为什么直接存 document.body.innerHTML 会失败
常见错误现象：页面刷新后恢复的 HTML 看似一样，但 checkbox 不再勾选、富文本内容为空、自定义组件状态丢失、textarea 光标位置错乱。
-
innerHTML只保存渲染后的静态字符串，不包含 DOM 节点的运行时属性（如value、checked、selectedIndex） - 通过 JS 动态插入的节点（如
document.createElement('div')）若未被innerHTML包含，就彻底消失 - Web Components 或框架（React/Vue）挂载的根节点通常不在
innerHTML范围内，存了也白存 - 某些浏览器在隐私模式下会静默禁用
localStorage，导致setItem()失败却无提示
怎么正确捕获可恢复的 HTML 结构状态
核心是“分离结构 + 合并状态”，不是拍快照，而是提取关键可序列化字段。
- 对普通表单元素（
input、textarea、select、checkbox、radio），遍历并显式读取.value、.checked、.selectedIndex等属性，存为对象：{ "email": "a@b.com", "agree": true, "plan": 2 } - 对富文本容器（如
contenteditable="true"或 Quill/Editor.js 实例），优先调用其 API 获取纯文本或 Delta（如quill.getContents()），而非读innerHTML - 对需要保留样式的单元格或区域（如表格高亮），用
dataset标记状态（<td data-state="error">），恢复时用 CSS 类映射，而不是硬编码style属性 - 给每个需持久化的结构块加唯一
data-persist-id，避免多表单互相覆盖；例如：<form data-persist-id="invoice-form">
localStorage 写入前必须做的三件事
否则数据可能写不进、读不出、或恢复时崩溃。
立即学习“前端免费学习笔记（深入）”；
- 先校验是否可用：
try { localStorage.setItem('test', 'ok'); } catch (e) { /* 降级用 sessionStorage 或跳过 */ } - 对象必须
JSON.stringify()，读取时必须JSON.parse()并加try/catch—— 用户手动清空或篡改过localStorage是常态 - 存前检查容量：用
navigator.storage.estimate()获取剩余配额，当usage / quota > 0.9时主动清理旧草稿（如按时间戳淘汰超过 7 天的draft-*键）
页面加载时安全恢复结构的要点
恢复不是“填回去”就完事，要防冲突、防覆盖、防 XSS。
- 恢复前先判断表单是否已初始化（比如 React 已 mount、Vue 已 createApp），避免 DOM 操作与框架冲突；可加
data-initialized="true"标记 - 只恢复用户明确修改过的字段，跳过 placeholder 值、默认选中项（如
<option value="" selected>-- 请选择 --</option>） - 若从
localStorage读出的是 HTML 字符串（如草稿内容），必须用DOMPurify.sanitize()过滤后再insertAdjacentHTML()，防止执行恶意脚本 - 恢复完成后，显示轻量提示（如 toast）：“已恢复上次编辑内容”，并提供“清除草稿”按钮，调用
localStorage.removeItem('key')
最易被忽略的一点：没有统一的“结构版本号”。当 HTML 模板升级（比如字段重命名、新增必填项），旧草稿 JSON 里的 key 可能已失效，直接恢复会导致空值或报错。应在存草稿时写入 schemaVersion: "v2.1"，恢复前比对当前模板版本，不匹配则丢弃或触发迁移逻辑。
