localstorage.getitem()返回值永远是字符串或null，存数字42读出为"42"，存布尔值需json.parse()或显式转换，对象必须先json.stringify()再json.parse()，读不存在key返回null而非undefined。
localStorage.getItem() 能直接读取数据，但读出来的是字符串，不是原始类型——这是最常踩的坑。
getItem 返回值永远是字符串或 null
即使你存的是数字、布尔值或对象，getItem 也只返回字符串。比如存了 localStorage.setItem('count', 42)，再用 getItem('count') 拿到的是 "42"，不是数字 42。
常见错误现象：代码里直接做 if (localStorage.getItem('isLogin')) { ... }，看似能运行，但若存的是 "false"（字符串），这个判断依然为真。
- 需要布尔值？用
JSON.parse(localStorage.getItem('isLogin'))或显式转换：localStorage.getItem('isLogin') === 'true' - 需要数字？用
Number(localStorage.getItem('count'))或一元加号：+localStorage.getItem('count') - 需要对象/数组？必须先用
JSON.parse()，且确保当初是用JSON.stringify()存的
读取不存在的 key 会返回 null，不是 undefined
localStorage.getItem('nonexistent') 的结果是 null，不是 undefined。这点和普通对象属性访问不同，容易在条件判断中出错。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
使用场景：做默认值 fallback 时别写 localStorage.getItem('theme') || 'light' ——如果存了空字符串 "" 或字符串 "null"，也会被覆盖。
- 更安全的写法：
localStorage.getItem('theme') ?? 'light'（ES2020 空值合并） - 或显式检查：
localStorage.getItem('theme') !== null ? localStorage.getItem('theme') : 'light'
跨协议、跨端口、跨域名完全隔离
localStorage 的作用域严格绑定在 protocol + host + port 上。http://a.com 和 https://a.com 之间不共享；localhost:3000 和 localhost:8080 也不通；甚至 a.com 和 www.a.com 都是两个独立存储空间。
性能影响小，但调试时容易误判“为什么我刚存的数据读不出来？”——先确认当前页面 URL 是否和存储时完全一致。
- Chrome DevTools 的 Application → Storage → Local Storage 右侧显示的就是当前 origin 的全部键值对
- 执行
localStorage.removeItem('key')或清空前，建议先console.log(localStorage.getItem('key'))确认是否存在
真正麻烦的不是怎么读，而是读完要不要 parse、要不要类型校验、要不要处理 null 边界——这些逻辑漏掉一个，后面就可能在某个用户设备上静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
