javascript本地存储怎么做_如何使用localStorage和sessionStorage【教程】

5次阅读

localStorage和sessionStorage均需字符串对象存储,但生命周期不同:localStorage持久保存且跨标签页共享,sessionStorage仅限单标签页会话;二者均同步阻塞、无加密、有容量限制,使用时须防xss、处理jsON解析异常及浏览器兼容问题。

javascript本地存储怎么做_如何使用localStorage和sessionStorage【教程】

localStorage 和 sessionStorage 都能存字符串,但它们的生命周期、作用域和用途完全不同——别直接套用同一套写法,否则数据会莫名其妙消失或跨标签页污染。

localStorage.setItem() 只接受字符串,对象要先 json.stringify()

直接传对象会变成 [Object Object],读出来就是个空对象或报错:

localStorage.setItem('user', { name: 'Alice' }); // ❌ 存进去是 "[object Object]" console.log(localStorage.getItem('user')); // → "[object Object]"

正确做法是序列化再存,读取时反序列化:

  • localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 28 }))
  • const user = JSON.parse(localStorage.getItem('user'))(注意加 try-catch,损坏的 JSON 会抛错)
  • 如果值可能为 NULLundefinedJSON.stringify(null) 是安全的,但 JSON.stringify(undefined) 返回 undefined(不存入),需提前过滤

sessionStorage 在关闭标签页后立即清空,不是“关浏览器才清”

很多人误以为 sessionStorage 是按“浏览器会话”清除,其实它的生命周期绑定到**页面会话(page session)**,即:一个 tab 标签页从打开到关闭的全过程。即使你只是右键“重新加载”,数据还在;但一旦关掉这个 tab,所有 sessionStorage 条目就没了。

立即学习Java免费学习笔记(深入)”;

  • 适合临时表单草稿、向导步骤状态、单次登录态透传(比如 OAuth 回跳时暂存 state)
  • 不能用于跨 tab 共享数据(localStorage 才可以)
  • 同源下不同 tab 的 sessionStorage 完全隔离,互不可见

localStorage 有 5–10MB 限制,且是同步阻塞操作

虽然规范没硬性规定容量,但 chrome/firefox 通常给 5MB(safari 移动端更严,约 2.5MB),超出会抛 QuotaExceededError。更重要的是:localStorage 是同步 API,大体积写入(比如存几 MB 日志)会卡线程

  • 写入前先估算大小:new Blob([JSON.stringify(data)]).size(近似字节数)
  • 避免高频写入,比如输入框实时存,改用防抖 + setTimeout 延迟提交
  • 敏感信息别存——它不加密,且同源脚本可任意读取(XSS 一打一个准)
  • 需要持久化但又怕爆内存?考虑 IndexedDB,它异步、容量大、支持结构化查询

真正容易被忽略的是错误边界:getItem 读不到时返回 null 而不是 undefined,JSON.parse 失败不报 warning,而是直接 throw;还有 Safari 无痕模式下,localStorage 会被禁用(静默失败),得兜底用内存缓存。

text=ZqhQzanResources