LocalStorage 和 SessionStorage 均仅支持字符串存储,对象需 JSON.stringify/parse 转换;SessionStorage 以标签页为单位,关闭即清空,适合临时状态;LocalStorage 持久保存但无过期机制,需手动管理时效与清理,且二者均不跨域、不存函数或 undefined,敏感数据应避免使用。

LocalStorage 和 SessionStorage 都能存字符串,但生命周期、作用域和用途完全不同——别用错,否则用户关个标签页就丢数据,或者缓存永远清不掉。
localStorage.setItem() 只接受字符串,对象得自己序列化
直接传对象会变成 [object Object],读出来就是废数据:
localStorage.setItem('user', { name: 'Alice' }); // ❌ 存进去是 "[object Object]"
console.log(localStorage.getItem('user')); // → "[object Object]"正确做法是手动 JSON.stringify() 和 JSON.parse():
- 写入前:
localStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 })) - 读取后:
const user = JSON.parse(localStorage.getItem('user')) - 记得加
try/catch,万一存储的字符串不是合法 JSON(比如被手动篡改过)会直接报SyntaxError
sessionStorage 在关闭标签页后自动清空,但刷新不丢
它的“会话”是以标签页(tab)为单位的,不是以浏览器窗口或用户登录状态为单位:
立即学习“Java免费学习笔记(深入)”;
- 同一页面刷新:数据保留 ✅
- 新开一个同 URL 的标签页:
sessionStorage是空的 ❌(和原 tab 不共享) - 从 A 页面用
window.open()打开 B 页面:B 默认继承 A 的sessionStorage(仅限同源且非隐私模式)✅ - 用户手动关闭该标签页:所有键值对立即销毁,不可恢复
适合临时暂存表单草稿、向导步骤状态这类“只活到用户离开当前页”的数据。
localStorage 没有过期机制,得自己控制容量和清理时机
它不会自动清理,也不按时间过期,一旦写入就一直存在,直到被代码或用户手动清除:
- 单域名下通常有 5–10MB 限制(Chrome 约 10MB,Safari 移动端仅 5MB),超限会抛
QuotaExceededError - 不能设 TTL,想实现“7 天后失效”,得自己存时间戳:
localStorage.setItem('token', JSON.stringify({ value: 'xxx', expires: Date.now() + 7 * 24 * 60 * 60 * 1000 })) - 读取时先检查
expires,过期就localStorage.removeItem()并返回null - 注意:用户在浏览器设置里点“清除浏览数据”,勾选“Cookie 及其他网站数据”就会连带清掉
localStorage
两者都不支持跨域、不触发事件监听、无法存函数或 undefined
它们只是简单的键值对存储,能力非常有限:
- 不同协议(
httpvshttps)、子域(a.example.comvsb.example.com)完全隔离,无法共享 -
storage事件只在其他同源 tab 修改数据时触发,当前 tab 写完不会收到自己的变更通知 -
undefined、function、Symbol、BigInt这些类型 JSON 序列化会丢失或报错,存之前必须转成可序列化结构 - 没有内置加密,敏感信息(如 token)不要直接存;即使加了前缀混淆,也防不住控制台一眼看到
真正需要持久化登录态或敏感数据时,优先走服务端 session + httpOnly Cookie,localStorage 顶多存个用户偏好或离线缓存标识。











