localStorage和sessionStorage都只能存字符串，存对象必须JSON.stringify()、取时JSON.parse()并加try/catch；区别在于localStorage同源永久共享，sessionStorage仅当前tab有效且关闭即清空。
localStorage 和 sessionStorage 不是“用不用”的问题，而是“该用哪个、怎么存才不会出错”的问题。它们都只能存字符串，存对象不序列化会变成 [object Object]，取出来直接 undefined 是最常见的翻车现场。
存数据前必须 JSON.stringify()
直接 localStorage.setItem('user', {name: 'Alice'}) 看似没报错，但实际存进去的是 [object Object] 字符串，后续 JSON.parse() 会 SyntaxError。正确做法：
- 存对象：先
JSON.stringify()，再setItem() - 取对象：先
getItem()，再JSON.parse()，且必须加try/catch—— 因为别人可能手动删改过值，或存了非法 JSON - 存数字/布尔值也建议统一走
stringify，避免类型隐式转换陷阱（比如localStorage.setItem('count', 0)存的是字符串"0"，取出来再++就变成"01"）
localStorage 与 sessionStorage 的关键区别
区别不在 API，而在生命周期和作用域：
-
localStorage：同源下永久存在，关浏览器、重启电脑都不丢；所有同源 tab 共享同一份数据 -
sessionStorage：仅当前 tab 有效，关闭 tab 即清空；即使同源，新开 tab 的sessionStorage是隔离的 - 两者都受同源策略限制：
https://a.com和https://b.com互不可见；http和https也算不同源
读取时必须处理 null 和解析失败
getItem() 找不到键时返回 null，不是 undefined，直接 JSON.parse(null) 会抛 SyntaxError。安全读取模式：
立即学习“Java免费学习笔记（深入）”；
function getFromStorage(key) {
const raw = localStorage.getItem(key);
if (!raw) return null;
try {
return JSON.parse(raw);
} catch (e) {
console.warn(`Invalid JSON in localStorage key "${key}"`);
return null;
}
}
别省略 try/catch —— 用户用开发者工具乱改、插件干扰、跨域写入失败残留垃圾值，都很常见。
注意存储上限和性能边界
大多数浏览器给每个源分配约 5–10MB localStorage 空间，但它是同步阻塞 API，大体积数据（如 >1MB）读写会卡主线程。实际使用中：
- 避免存日志、原始图片 base64、未压缩的数组列表
- 高频更新场景（如打字实时存草稿）用
debounce控制写入频率，否则频繁setItem可能触发性能告警 -
sessionStorage虽然自动清理，但大体积数据仍会拖慢 tab 启动速度，尤其在低端设备上
真正容易被忽略的点是：它们都只支持字符串，且没有内置的过期机制 —— 想实现“7天后自动失效”，得自己存时间戳并每次读取时判断，不能依赖 storage 本身。
