localStorage.getItem()返回字符串或null，需手动赋值到DOM；存对象/数组须JSON.stringify()，读取须JSON.parse()并用try/catch防护，且恢复逻辑应统一置于DOMContentLoaded中防重复执行。
localStorage.getItem() 读取后必须手动写入 DOM
直接调用 localStorage.getItem("key") 只返回字符串，不会自动出现在页面上。你得自己把它塞进某个元素里，比如 textContent 或 innerHTML。常见错误是只执行了读取，却忘了赋值——页面自然还是空的。
使用场景：表单恢复、草稿箱、用户偏好（如主题色、语言）。
- 优先用
textContent更新纯文本，避免 XSS 风险 - 若需渲染 HTML 片段（如富文本草稿），才用
innerHTML，但务必确认内容可信 - 读取前先判断是否为
null或空字符串，防止覆盖用户刚输入的内容
动态更新要防重复初始化
页面加载时多次执行恢复逻辑（比如在 DOMContentLoaded 外又写了全局脚本），会导致数据被反复写入、甚至清空。典型表现是：刷新后草稿“闪一下”又没了，或表格行凭空多出一倍。
解决方案很简单：
- 所有恢复逻辑统一放在
document.addEventListener("DOMContentLoaded", () => { ... })内 - 对每个存储项做存在性检查：
if (localStorage.getItem("draft_content")) { ... } - 如果是表格类结构，先清空现有 DOM 节点，再根据 JSON 解析后的数组重建，而不是追加
JSON.parse() 是处理对象/数组的必经步骤
localStorage 只存字符串。如果你存的是数组或对象（比如表格行数据），必须先 JSON.stringify()；读取时若不 JSON.parse()，拿到的就是带引号的字符串字面量，比如 "[{\"name\":\"张三\"}]"，直接赋值给 innerHTML 会原样显示那段 JSON 文本。
容易踩的坑：
- 忘记
try...catch包裹JSON.parse()，一旦存储损坏（如手动编辑过 localStorage），整个恢复流程就静默失败 - 用
==或===直接比较解析结果，而没注意JSON.parse(null)报错，JSON.parse("")也报错 - 存的时候用了
JSON.stringify(arr)，取的时候却忘了JSON.parse()，导致arr.map is not a function
节流保存比“实时存”更稳妥
监听 input 事件直接调用 localStorage.setItem() 看似简单，但高频输入（比如快速打字）会频繁触发写入，某些旧版浏览器或低端设备可能出现卡顿，甚至触发 QuotaExceededError（超出配额）。
推荐做法是加一层轻量节流：
- 用
setTimeout延迟 300–500ms 写入，输入停顿后再落盘 - 每次新触发时先
clearTimeout上一个定时器，避免堆积 - 页面卸载前（
beforeunload）强制保存一次，兜底防意外关闭
复杂点在于：节流逻辑要和空值校验、异常捕获一起封装，否则很容易漏掉某条路径导致数据丢失。localStorage 不报错，但数据没存进去，你根本不知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
