HTML文档结构不能自动本地存储，必须用JavaScript提取outerHTML/innerHTML字符串后存入localStorage或sessionStorage；直接存DOM节点无效，恢复时需处理XSS、ID冲突、事件重绑等问题。
直接说结论：HTML文档结构本身不能“自动”被本地存储，必须靠 JavaScript 主动提取（比如 outerHTML 或 innerHTML），再用 localStorage 或 sessionStorage 保存字符串。没人帮你做这一步，写了就存，不写就不存。
怎么把某个 HTML 片段存进 localStorage
常见错误是直接传 DOM 节点，比如 localStorage.setItem('section', document.getElementById('main')) —— 这会存成 [object HTMLElement]，毫无意义。
- 必须先序列化：用
element.outerHTML获取完整 HTML 字符串（含标签本身），或element.innerHTML（只含内部内容） - 存之前建议加容错，比如检查元素是否存在：
if (el) localStorage.setItem('saved', el.outerHTML) - 如果片段含
<script>标签或内联事件（如onclick="doSomething()"），恢复后不会执行——脚本不会自动重载，事件监听器也不会重建 - 若需保留交互逻辑，得额外保存状态数据（如表单值、展开状态），而不是只存 HTML 字符串
读取后怎么安全地还原到页面
直接赋值 innerHTML 是最常用方式，但有风险：XSS 漏洞、脚本不执行、样式丢失（如果依赖外部 CSS 未加载）。
- 推荐做法：
document.getElementById('target').innerHTML = localStorage.getItem('saved') || ''，空值兜底避免报错 - 不要用
document.write()或document.open()/close()，已废弃且会清空整个页面 - 若存的是带 ID 的结构，注意 ID 冲突（比如多次恢复导致多个相同 ID）；可用
cloneNode(true)+ 随机前缀处理 - 恢复后需手动重绑事件（如按钮点击），或用事件委托避免重复绑定
localStorage 和 sessionStorage 在存 HTML 时的区别
不是“能不能存”，而是“该不该跨标签页共享”。选错会导致用户在另一个标签页看不到刚保存的草稿，或关掉窗口后历史消失。
立即学习“前端免费学习笔记（深入）”；
- 用
localStorage：适合长期保存的模板、用户自定义区块（比如编辑器里拖拽保存的组件） - 用
sessionStorage：适合单次会话的临时快照，比如多步骤表单中某一页的 HTML 备份，关掉标签就丢，不污染其他窗口 - 二者 API 完全一致，但
sessionStorage数据无法被同域名其他标签页读取，哪怕 URL 一模一样 - 容量限制实际更严：Chrome 对
localStorage单个键值对建议不超过 2MB，超长 HTML 字符串可能触发QuotaExceededError
真正容易被忽略的点：HTML 字符串里如果有动态生成的路径（比如 <img src="/uploads/xxx.jpg">），恢复时路径依然有效；但如果是相对路径且页面跳转了目录层级，就会 404。存之前最好统一转成绝对 URL，或只存结构、数据分开存。
