javascript本地存储如何实现_localstorage和sessionstorage有何区别【教程】

10次阅读

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

javascript本地存储如何实现_localstorage和sessionstorage有何区别【教程】

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

它们只是简单的键值对存储,能力非常有限:

  • 不同协议(http vs https)、子域(a.example.com vs b.example.com)完全隔离,无法共享
  • storage 事件只在其他同源 tab 修改数据时触发,当前 tab 写完不会收到自己的变更通知
  • undefinedfunctionsymbolBigInt 这些类型 JSON 序列化会丢失或报错,存之前必须转成可序列化结构
  • 没有内置加密,敏感信息(如 token)不要直接存;即使加了前缀混淆,也防不住控制台一眼看到

真正需要持久化登录态或敏感数据时,优先走服务端 session + httpOnly Cookie,localStorage 顶多存个用户偏好或离线缓存标识。

text=ZqhQzanResources