localstorage只能存字符串，对象必须用json.stringify()序列化后存储，读取时用json.parse()解析并加try-catch防错，且无法保存函数、date等特殊类型。
localStorage.setItem 保存组件状态前必须序列化
直接传对象会变成 [object Object]，所有状态都变成空字符串。这不是 bug，是 API 设计限制 —— localStorage 只接受字符串值。
- 用
JSON.stringify()包一层再存：比如localStorage.setItem('theme', JSON.stringify({ mode: 'dark', fontSize: 14 })) - 读取时必须配对使用
JSON.parse()，且要防错：返回null或解析失败时别让页面崩溃 - 不要试图存函数、DOM 节点、
Date对象或undefined—— 它们在序列化后会丢失或变成null
页面加载时必须主动同步 checked / value 等 DOM 属性
只写入 localStorage 不等于 UI 恢复。浏览器刷新后，HTML 默认渲染原始状态（比如 input[type="checkbox"] 总是未勾选），不会自动读 localStorage 并设 checked。
- 在
DOMContentLoaded或组件mounted阶段读取并赋值：el.checked = JSON.parse(localStorage.getItem('toggle') || 'false') - 表单控件如
select、textarea同理：先读localStorage，再设el.value或el.selectedIndex - 别用
el.getAttribute('checked')判断状态 —— 它只反映初始 HTML 属性，不是当前真实值
表格单元格、富文本等结构化状态需用唯一 key 标识
存整个 innerHTML 看似简单，但容易覆盖、难增量更新，且含脚本时有 XSS 风险。更可靠的方式是按“可识别单元”分别存状态。
- 给每个
td加data-id="row-2-col-3"，存键为cell-state-row-2-col-3，值为"green"或"true" - 富文本编辑器内容建议用
DOMPurify.sanitize(editor.innerHTML)过滤后再存，避免执行恶意脚本 - 不要依赖
innerHTML的顺序或结构稳定性 —— DOM 重排后可能失效，用显式 ID 或索引更稳妥
localStorage.clear() 会清空所有同源数据，不是按组件隔离
它不认“组件名”，只按域名+协议+端口生效。一个组件调 clear()，其他组件的状态全丢 —— 这是实际项目中最常被忽略的破坏点。
- 删单个状态用
localStorage.removeItem('component-a-theme')，别图省事全清 - 批量操作建议加命名空间前缀：
myapp:sidebar:open、myapp:table:sort，方便筛选和清理 - 注意容量上限（通常 5–10 MB），存大段 HTML 或 base64 图片前先估算，超限时
setItem会静默失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
