localstorage.setitem和getitem是仅支持字符串的同步底层方法，存对象须json.stringify、取值需判null并json.parse，且受同源限制与容量约束。
localStorage.setItem 和 getItem 不是“教程级接口”，它们就是两个同步、仅支持字符串的底层方法——用错类型或忽略返回值，5分钟内就能让功能失效。
setItem(key, value) 必须传两个字符串参数
它不校验类型，所有非字符串值都会被强制转成字符串，且不可逆。比如传数字 42，存进去的是字符串 "42"；传对象 {x: 1}，存进去的是 "[object Object]"，数据已损坏。
- 正确做法：显式转换，如
localStorage.setItem('timeout', String(3000)) - 存对象必须配
JSON.stringify()：localStorage.setItem('user', JSON.stringify({name: 'Alice'})) - 避免传
null或undefined—— 它们会变成字符串"null"和"undefined"，后续无法区分原始值和错误写入 - 键名建议加统一前缀（如
"app_theme"），避免跨模块冲突
getItem(key) 返回 null 而不是空字符串
这是最常踩的坑：localStorage.getItem('missing') 返回的是 null，不是 ""，更不是 undefined。直接用 == 或 === 比较原始值会失败。
- 判空必须用
=== null或== null（后者兼容undefined） - 取对象时不能直接
JSON.parse(localStorage.getItem('user'))，因为JSON.parse(null)报错 - 安全写法是：
const saved = localStorage.getItem('user'); const user = saved ? JSON.parse(saved) : null; - 若需默认值，推荐
JSON.parse(localStorage.getItem('theme') || '"light"')，但注意字符串字面量要加引号
同源限制与存储容量的实际影响
协议、域名、端口任一不同，localStorage 就是另一个世界。开发时 localhost:3000 和 localhost:8080 互不可见；HTTP 和 HTTPS 也完全隔离。
- 典型容量是 5–10MB，但它是按字符数算的（UTF-16），中文占 2 字节，长文本容易爆满
- 触发
QuotaExceededError时不会静默失败，必须try/catch捕获 - 没有异步机制，大文本写入（如日志缓存）可能卡住主线程，尤其低端设备
- 修改后不会自动通知本窗口，只通过
storage事件通知其他同源窗口
常见错误写法与修复对照
这些错误在代码审查中高频出现，且往往上线后才暴露。
- ❌
localStorage.SetItem('k', 'v')→ 正确是setItem()（小写 s，无大写） - ❌
localStorage.setItem('user', userObj)→ 忘了JSON.stringify()，结果存成"[object Object]" - ❌
if (localStorage.getItem('flag')) { ... }→ 若存过字符串"false"，条件仍为真，应改为localStorage.getItem('flag') === 'true' - ❌ 直接覆盖对象属性再存：
let u = JSON.parse(...); u.name = 'Bob'; localStorage.setItem('user', u)→u是对象，没序列化，又存成"[object Object]"
真正难的不是调用这两个方法，而是每次读写都记得：它只认字符串，不记类型，不报错，不提醒，也不帮你恢复。你写的每一行 setItem 和 getItem，都要自己对齐这个前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
