javascript如何操作浏览器本地存储_怎样使用localStorage和sessionStorage【教程】

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 都保留数据。

  • 适合存临时表单草稿、向导步骤状态、一次性 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 必须自己存时间戳并读取时校验。