localStorage只能存字符串，存对象需用JSON.stringify()序列化，取时用JSON.parse()反序列化并加try...catch；读取前须判空防null；无自动过期机制，需手动添加时间戳并校验。
localStorage 只能存字符串，别直接塞对象
直接 localStorage.setItem('user', { name: 'Alice' }) 不会报错，但实际存进去的是 [object Object]。JavaScript 会自动调用 toString()，结果就是个空壳。
正确做法是序列化：
- 存的时候用
JSON.stringify()：localStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 })) - 取的时候用
JSON.parse()：const user = JSON.parse(localStorage.getItem('user')) - 记得加
try...catch——如果存储内容被手动篡改或损坏，JSON.parse()会直接抛SyntaxError
读取时要检查值是否存在，避免解析 null
localStorage.getItem('user') 在键不存在时返回 null，不是 undefined。直接传给 JSON.parse(null) 会得到 null（不报错但结果意外），而更常见的是你期望一个对象却拿到 null，后续访问 user.name 就崩了。
稳妥写法：
- 先判断：
const raw = localStorage.getItem('user'); if (raw) { user = JSON.parse(raw); } - 或者用空值合并：
const user = JSON.parse(localStorage.getItem('user') ?? '{}');（但注意这会把缺失键默认成空对象，未必符合业务逻辑）
localStorage 没有过期机制，得自己控制生命周期
它不会自动清理，也不会因为页面关闭或浏览器重启而失效。用户数据可能长期滞留，甚至跨会话“复活”，这在某些场景下是隐患。
常见应对方式：
- 写入时附带时间戳：
localStorage.setItem('user', JSON.stringify({ data: {...}, expires: Date.now() + 7 * 24 * 60 * 60 * 1000 })) - 读取时校验：
if (user.expires && user.expires - 敏感操作前主动清理（比如登出时明确调用
localStorage.removeItem('user')）
注意同源限制和存储上限，别堆太多数据
localStorage 是按协议+域名+端口严格隔离的。https://a.com 和 http://a.com 互不可见；localhost:3000 和 localhost:8080 也不共享。
容量方面，大多数浏览器给每个源约 5–10MB，但它是**字符长度**（不是字节数），中文、emoji 都算多个字符。存大对象容易触发 QuotaExceededError。
建议：
- 只存关键字段（如
id、token、theme），别存完整用户资料或列表 - 定期用
Object.keys(localStorage).length和encodeURI(JSON.stringify(localStorage)).length估算占用 - 需要存大量结构化数据时，考虑
IndexedDB而非硬塞localStorage
实际项目里最常出问题的，不是怎么写，而是忘了校验、忘了清理、忘了它根本不知道“用户已登出”这件事。
