localStorage.setItem()和getItem()是直接写读本地存储的API，仅支持字符串，存对象需JSON序列化，取值须判null并容错解析；同源限制严格，异常需try/catch捕获。
localStorage.setItem() 和 getItem() 是最直接的写读方式
在 index.html 里调用 localStorage 不需要额外引入，只要浏览器支持（所有现代浏览器都支持），脚本一执行就能用。关键是要确保 JS 代码在 DOM 加载完成后运行，否则可能因元素未就绪而读写失败。
常见错误是把脚本写在 <head> 里又没加 defer 或监听 DOMContentLoaded，结果 document.getElementById() 返回 null，但 localStorage 本身不受影响——它只和执行时机、作用域有关。
-
localStorage.setItem('username', 'alice')：存字符串，非字符串会自动转成字符串（比如true→"true"） -
localStorage.getItem('username')：取值，不存在时返回null，不是undefined - 键名区分大小写：
'Token'和'token'是两个不同项 - 同源限制严格：HTTP 和 HTTPS、www 和非 www、端口不同，都算不同源，数据不共享
页面加载时从 localStorage 恢复表单内容
这是典型使用场景：用户填了一半关掉页面，再打开时自动还原。重点在于「读取后要主动赋值给 DOM 元素」，localStorage 不会自动绑定到 input 的 value 上。
示例逻辑（放在 <body> 底部或用 addEventListener('DOMContentLoaded', ...) 包裹）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const input = document.getElementById('email');
if (input) {
const saved = localStorage.getItem('savedEmail');
if (saved !== null) {
input.value = saved;
}
}
input.addEventListener('input', () => {
localStorage.setItem('savedEmail', input.value);
});
- 注意判断
saved !== null，因为getItem()返回null表示键不存在，而空字符串''是合法值 - 不要在
input事件里频繁写入大段文本（如富文本编辑器内容），有性能风险；可加防抖或改用change事件 - 移动端软键盘弹起时触发多次
input，但localStorage写入本身是同步阻塞的，大量调用会影响响应
清除 localStorage 时别误删其他键
localStorage.clear() 会清空当前域名下所有键值对，不是只清你用的那几个。开发调试时容易顺手清掉登录态、主题偏好等其它模块的数据。
- 更安全的做法是精准删除：
localStorage.removeItem('tempDraft') - 调试时可用
Object.keys(localStorage)查看当前有哪些键（返回字符串数组） - Chrome DevTools 的 Application → Storage → Local Storage 可视化查看和手动删键，比代码更可控
- 某些浏览器隐私模式（如 Safari 无痕）下
localStorage是禁用的，调用会抛SecurityError，需包裹 try/catch
localStorage 存对象必须 JSON 序列化
它只接受字符串作为值，直接存对象会变成 "[object Object]"，取出来就废了。
- 存：
localStorage.setItem('user', JSON.stringify({id: 123, name: 'bob'})) - 取：
const user = JSON.parse(localStorage.getItem('user') || '{}')（加|| '{}'避免JSON.parse(null)报错） - 注意：函数、undefined、Date、RegExp 等无法被
JSON.stringify正确序列化，存之前得自己处理 - 如果数据结构复杂或需要监听变化，
localStorage就不太合适，该考虑IndexedDB或状态管理库
localStorage 看似“能用”，其实根本读不到之前存的值。 
