HTML模板在实现组件状态快照恢复中的技术实现-html教程-PHP中文网

不能用 template.innerhtml 或 outerhtml 存快照，因其不包含 input.value、textarea.value、select.selectedoptions 等运行时值，丢失事件监听器，无法保存光标选区，特殊字符易致 json 解析失败，且动态 dom 可能遗漏或无上下文。

html模板在实现组件状态快照恢复中的技术实现

直接用 HTML 模板字符串做组件状态快照不可靠——它不包含运行时值、丢失事件绑定、无法还原光标和选区，且容易因特殊字符导致 JSON.parse() 失败。真正可用的快照必须是「可重建的状态描述」，而非 DOM 副本。

为什么不能用 template.innerHTML 或 outerHTML 存快照

看似最直觉的做法，实际在生产环境踩坑最多：

innerHTML 和 outerHTML 都不包含 input.value、textarea.value、select.selectedOptions 等运行时属性，恢复后表单全空
所有通过 addEventListener 绑定的事件监听器彻底丢失，按钮点击无响应
contenteditable 元素的光标位置、文本选区（getSelection()）完全无法保存
模板里若有未转义的双引号、换行符或 U+2028/U+2029 行分隔符，JSON.stringify() 后再 JSON.parse() 会静默失败或抛错
动态插入的 DOM（如 JS 渲染的列表项）可能被漏掉，或虽在字符串中但无数据上下文，无法安全重建

该存什么：最小可重建的状态对象

快照不是存“DOM 长什么样”，而是存“用户做了哪些决定”。结构应扁平、键名稳定、不含动态值：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

表单字段：用 name 或显式 data-state-key 作 key，存 value、checked、selectedOptions.map(o => o.value)
折叠/展开：如 { "sidebar": false, "section-3": true }，别存 class 名或元素引用
当前 tab / 步骤：如 "activeTab": "preview"，避免用索引（"activeIndex": 2），顺序一变就错
滚动位置：存 "scrollY": 420，而不是试图截取 container.innerHTML + scrollTop 拼接
富文本内容：调用编辑器 API 获取纯内容，如 quill.root.innerHTML（需过滤 <script></script>/<style></style>），或 editor.getContent()（TinyMCE）

localStorage 写入与读取的关键防护

写进去不等于能读出来，iOS 无痕模式、存储配额超限、解析失败都会让快照静默失效：

统一用一个 key 存整个状态，如 ui-state-v3，别拆成 form-name、form-email 等零散项
写入前必须 JSON.stringify(state)，读取后必须 JSON.parse(localStorage.getItem('ui-state-v3'))；否则 getItem() 返回的是字符串 "[object Object]"
必须加 try/catch：捕获 QuotaExceededError 和 DOMException（尤其 iOS 无痕模式下常静默抛错），失败时降级到内存变量 const fallbackState = {}
读取后校验非空：if (saved) { try { const parsed = JSON.parse(saved); /* 使用 */ } catch(e) { /* 丢弃 */ } }

恢复时机与 DOM 操作的精确控制

DOM 就绪前读取是白忙一场，就绪后乱赋值又会导致闪屏或事件错位：

必须等 DOMContentLoaded 后执行恢复逻辑，别放里或用 document.ready（原生不支持）
表单控件赋值要按类型严格处理：
– checkbox/radio：用 el.checked = savedValue，别用 setAttribute('checked', '')
– select：用 el.value = savedValue，不是 el.selectedIndex（选项顺序可能变）
– textarea/input：直接 el.value = savedValue，别用 innerHTML（XSS 风险）
滚动恢复要用 requestAnimationFrame(() => el.scrollTop = savedScroll)，否则骨架屏或懒加载内容还没渲染，滚动会被重置
自定义组件（如 toggle、slider）必须暴露 setter 方法（如 toggle.setActive(true)），不能靠 class 名硬塞