不能直接存 document.documentelement.outerhtml，因为 outerhtml 不包含表单 value、丢失事件监听器、无法保存光标选区、遗漏动态 dom 上下文，且特殊字符易导致 json 解析失败；应存最小可重建的状态对象（如表单值、折叠状态、滚动位置等），统一 key 存储，json 序列化前后加 try-catch，并在 domcontentloaded 后恢复并触发必要事件。
localStorage 不能直接保存 HTML 结构快照，它只存字符串；想靠它“还原页面 UI 状态”，必须手动提取、序列化、重建——不是复制 innerHTML 就完事，否则会丢事件、破坏表单状态、漏动态 class。
为什么不能直接存 document.documentElement.outerHTML
看似最省事，但实际踩坑极多：
• 表单输入框的 value 属性不会被 outerHTML 包含，存进去再恢复就是空值
• 绑定的事件监听器（如 button.addEventListener）完全丢失，按钮点不动
• contenteditable 元素的光标位置、选区信息无法保存
• 动态插入的 DOM（比如通过 JS 渲染的列表项）可能没被包含，或包含但无数据上下文
• localStorage 存的是纯字符串，outerHTML 里若有未转义的双引号、换行、特殊字符，JSON.parse() 会直接失败
真正该存什么：UI 状态的最小可重建描述
不是 DOM 树，而是驱动 UI 的“状态源”：
• 表单字段：用 name 或 data-state-key 为键，存 value、checked、selectedOptions 等属性值
• 折叠/展开状态：存 { "sidebar-collapsed": true, "section-2-open": false }
• 当前 tab 或 active 步骤：存 "activeTab": "preview"
• 滚动位置：存 "scrollY": 142，而不是试图截屏
• 富文本编辑器内容：取 editor.getContent()（如 TinyMCE）或 quill.root.innerHTML（需过滤 script/style 标签）
localStorage.setItem() 前必须做的三件事
- 统一用一个 key 存整个状态对象，比如
ui-state-v2，别拆成几十个零散 key - 写入前
JSON.stringify(state)，读取后JSON.parse(localStorage.getItem('ui-state-v2'))—— 不做这步，getItem返回的就是字符串"[object Object]" - 加 try-catch，捕获
QuotaExceededError和DOMException（iOS 无痕模式下常静默抛错），失败时降级到内存变量const fallbackState = {}
恢复 UI 时最容易忽略的时机和副作用
DOM 必须就绪后再读取：
• 不要在 <script></script> 放 里直接执行，容易取到 null
• 推荐用 document.addEventListener('DOMContentLoaded', () => { ... }) 或 window.addEventListener('load', () => { ... })
• 恢复表单值后，要手动触发 input 或 change 事件，否则 Vue/React 等框架绑定的数据不会同步
• 恢复折叠状态时，别只改 class，得同步操作 aria-expanded 和 hidden 属性，否则无障碍访问失效
• 如果页面有多个入口（比如从搜索页跳转进来），要检查当前 URL 是否匹配快照适用范围，避免把 A 页的状态强刷到 B 页上
localStorage 只是容器，关键是你往里面放什么、什么时候放、放完怎么用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
