17370845950

LocalStorage只存字符串，存对象需JSON.stringify()、读取需JSON.parse()并加try...catch兜底；null/undefined会被转为字符串；受同源限制、无过期机制、不通知写入结果。

LocalStorage 不是“能存就随便存”，它只接受字符串，存对象不序列化会变成 [object Object]，读出来也是字符串——这是绝大多数人第一次踩的坑。

怎么安全地存对象或数组？

必须手动用 JSON.stringify() 转成字符串再存，读取时用 JSON.parse() 还原。否则存进去的是 [object Object]，取出来 JSON.parse() 会直接报错 SyntaxError: Unexpected token o in JSON at position 1。

• 存：用 localStorage.setItem('key', JSON.stringify(obj))
• 读：先用 localStorage.getItem('key') 拿字符串，再 JSON.parse()；但要加 try...catch，因为值可能被手动删改过、不是合法 JSON
• 如果解析失败，应有默认值兜底，比如 JSON.parse(localStorage.getItem('list') || '[]') 不够安全，推荐：

const data = localStorage.getItem('config');
let config = {};
try {
  config = data ? JSON.parse(data) : {};
} catch (e) {
  console.warn('localStorage config parse failed, using default');
}

为什么 localStorage.setItem('a', null) 会存成字符串 "null"？

setItem 的第二个参数会被强制转成字符串，null → "null"，undefined → "undefined"，0 → "0"，false → "false"。这不是 bug，是规范行为。

• 想存“空值”并和字符串 "null" 区分？只能存 JSON.stringify(null)（即 "null"），然后统一用 JSON.parse() 处理
• 判断是否存在，别用 if (localStorage.getItem('x')) —— 因为 "0"、"false" 都是真值；应该用 localStorage.getItem('x') !== null

浏览器限制和常见失效场景

LocalStorage 容量通常为 5MB（各浏览器略有差异），但真正容易出问题的是“同源限制”和“隐私模式”：

• 协议、域名、端口任一不同，就是不同源，数据完全隔离（http://a.com 和 https://a.com 不互通）
• Safari 在无痕模式下，localStorage 会抛 QuotaExceededError 或静默失败，连 getItem 都可能返回 null
• 部分安卓 WebView（尤其旧版）对 Unicode 或特殊字符支持差，存含 emoji 的字符串可能截断或报错
• 不要在页面加载早期（如 同步执行时）直接操作，某些嵌入式环境可能未就绪

替代方案：什么时候不该用 localStorage？

需要服务端同步、敏感信息（如 token）、大量结构化查询、或要求过期机制时，localStorage 就不合适：

• 存 token？优先用 httpOnly + Secure Cookie，localStorage 易受 XSS 窃取
• 要自动过期？它本身不支持 TTL，得自己存时间戳并在读取时判断，但不可靠（用户可改系统时间）
• 数据量大且频繁读写？考虑 IndexedDB，它支持事务、索引、二进制存储
• 只是临时跨页面传参？sessionStorage 更合适，关闭标签页即清空

真正难的不是语法，是记住：它永远只存字符串、永远同源隔离、永远没有过期、永远不通知你是否真的写进去了——所有“意外”，几乎都来自这四点被忽略。