页面刷新后ui状态丢失，是因为只调用localstorage.setitem()保存数据，却未在dom加载完成后手动读取并赋值还原；必须在domcontentloaded后执行getitem()、json.parse()及dom操作，否则状态无法自动恢复。
页面刷新后UI状态丢失，是因为没读localStorage
直接写 localStorage.setItem('ui-state', JSON.stringify(data)) 不等于UI能自动恢复。浏览器不会主动把存进去的东西“贴”回DOM上——你得手动取、手动赋值、手动触发渲染。
常见错误是只做了保存，忘了在页面加载时还原。比如一个折叠菜单的展开状态，存了 isMenuOpen: true，但没在 DOMContentLoaded 后执行 document.getElementById('menu').classList.toggle('open', saved.isMenuOpen)，结果每次刷新都回到默认收起。
- 必须在 DOM 就绪后读取：用
window.addEventListener('DOMContentLoaded', ())，别用document.ready（原生不支持）或过早的脚本执行 - 读取后要校验非空：
const saved = localStorage.getItem('ui-state'); if (saved) { try { JSON.parse(saved) } catch(e) { return; } } - 避免覆盖初始HTML状态：先读localStorage，再根据值操作DOM；不要先渲染默认态，再“强行切回”，容易闪屏或事件错位
存什么？不是整个outerHTML，而是可序列化的状态键值对
有人试图用 el.outerHTML 存DOM快照，这会带来三个问题：XSS风险、事件监听器丢失、体积膨胀（带样式/脚本的HTML字符串远大于纯状态）。真正该存的是“UI的决策结果”，比如：activeTab: 'settings'、collapsedSections: ['logs', 'history']、darkMode: true。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 结构化数据优先用
JSON.stringify()存，读取时必须配套JSON.parse()，否则localStorage.getItem()返回的是字符串，直接当对象用会报错 - 布尔/数字类型别存成字符串：
localStorage.setItem('darkMode', 'true')是错的，应该存true或'true'并统一解析逻辑 - 避免存函数、DOM引用、Date对象——它们无法被JSON序列化，存进去也是
null或{}"
输入框、开关、选中项这些控件怎么同步
表单控件的状态最容易出错，因为它们的值和属性（checked、selected、value）不完全等价。比如 checkbox 的 el.checked = true 和 el.setAttribute('checked', '') 行为不同，后者不改变实际勾选状态。
- checkbox/radio：用
el.checked = savedValue，别用setAttribute - select：用
el.value = savedValue，不是el.selectedIndex（选项顺序可能变） - textarea/input：直接赋
el.value = savedValue，别用innerHTML（有XSS） - 自定义toggle组件：确保它暴露一个 setter 方法，比如
toggle.setActive(true)，而不是靠 class 名硬塞
为什么改了状态却没存进localStorage
最常见原因是监听时机不对或防抖没配好。比如监听 click 事件存折叠状态，但用户快速连点两次，第二次触发时第一次还没写入完成（虽然实际很快，但逻辑上存在竞态），或者中文输入法下监听 input 导致高频写入失败。
- 对频繁变更的状态加防抖：用
setTimeout延迟 300–500ms 再写入，尤其适用于搜索框、滑块、实时预览类控件 - 避免重复存相同值：对比新旧值，
if (newVal !== oldVal) localStorage.setItem(...)，减少无效I/O - 注意事件冒泡干扰：比如在一个卡片里点开关，结果触发了外层卡片的点击事件，误存了卡片展开状态
- 隐私模式下
localStorage可能被禁用，要用try/catch包裹写入逻辑，降级到sessionStorage或内存缓存
真正麻烦的从来不是“怎么存”，而是“哪些状态值得存”和“存下来之后怎么精准还原”。DOM结构可以由模板保证，但用户每一次交互意图——哪一节被折叠、哪个标签页在前、光标停在哪——都需要拆解成原子状态单独建模。否则，看似存了快照，恢复时却像拼错的乐高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
