localStorage和sessionStorage均需手动序列化对象,前者持久存储且跨标签页共享,后者仅限当前标签页会话;二者均有容量限制,键名自动转字符串,且均不支持原生过期机制。

localStorage 和 sessionStorage 都能存字符串,但它们的生命周期、作用域和用途完全不同——别直接套用同一套写法,否则数据会莫名其妙消失或跨标签页污染。
localStorage.setItem() 存的是字符串,对象得自己序列化
直接传对象进去会变成 [object Object],读出来就是个废字符串:
localStorage.setItem('user', { name: 'Alice' }); // ❌
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') || 'null');(注意空值兜底) - 如果值为
null或解析失败,JSON.parse()会抛错,建议加try/catch
sessionStorage 在关闭标签页后自动清空,但刷新不丢
很多人误以为“关浏览器才清”,其实只要关掉当前 tab 就没了;而页面刷新、前进后退、F5 都保留数据。
立即学习“Java免费学习笔记(深入)”;
- 适合存临时表单草稿、向导步骤状态、一次性 token 等「仅本次会话有效」的数据
- 同域名下不同 tab 的
sessionStorage完全隔离,A 标签页写入的,B 标签页读不到 - 不能用于跨 tab 通信,要用
localStorage+storage事件配合
localStorage 有容量限制(通常 5–10MB),超限会抛 QuotaExceededError
不是所有浏览器都报同一错误类型,Chrome 是 DOMException: QuotaExceededError,Safari 可能静默失败。
- 写入前可先粗略估算:
JSON.stringify(data).length(单位是字节) - 避免往
localStorage塞大数组、日志堆栈、base64 图片等高体积内容 - 长期未清理的键会累积占用空间,建议定期用
localStorage.removeItem(key)或localStorage.clear()(慎用)
真正容易被忽略的点:localStorage 的键名是字符串,哪怕你传数字 localStorage.setItem(123, 'x'),它也会被转成 '123';还有,它不支持过期时间,要实现 TTL 必须自己存时间戳并读取时校验。











