javascript的localStorage与sessionStorage怎样使用？【教程】_网络技术

javascript的localStorage与sessionStorage怎样使用？【教程】

发布时间 - 2026-01-30 00:00:00 点击率：次

localStorage和sessionStorage都只能存字符串，存对象必须JSON.stringify()、取时JSON.parse()并加try/catch；区别在于localStorage同源永久共享，sessionStorage仅当前tab有效且关闭即清空。

localStorage 和 sessionStorage 不是“用不用”的问题，而是“该用哪个、怎么存才不会出错”的问题。它们都只能存字符串，存对象不序列化会变成 [object Object]，取出来直接 undefined 是最常见的翻车现场。

存数据前必须 JSON.stringify()

直接 localStorage.setItem('user', {name: 'Alice'}) 看似没报错，但实际存进去的是 [object Object] 字符串，后续 JSON.parse() 会 SyntaxError。正确做法：

存对象：先 JSON.stringify()，再 setItem()
取对象：先 getItem()，再 JSON.parse()，且必须加 try/catch —— 因为别人可能手动删改过值，或存了非法 JSON
存数字/布尔值也建议统一走 stringify，避免类型隐式转换陷阱（比如 localStorage.setItem('count', 0) 存的是字符串 "0"，取出来
再 ++ 就变成 "01"）

localStorage 与 sessionStorage 的关键区别

区别不在 API，而在生命周期和作用域：

localStorage：同源下永久存在，关浏览器、重启电脑都不丢；所有同源 tab 共享同一份数据
sessionStorage：仅当前 tab 有效，关闭 tab 即清空；即使同源，新开 tab 的 sessionStorage 是隔离的
两者都受同源策略限制：https://a.com 和 https://b.com 互不可见；http 和 https 也算不同源

读取时必须处理 null 和解析失败

getItem() 找不到键时返回 null，不是 undefined，直接 JSON.parse(null) 会抛 SyntaxError。安全读取模式：

function getFromStorage(key) {
  const raw = localStorage.getItem(key);
  if (!raw) return null;
  try {
    return JSON.parse(raw);
  } catch (e) {
    console.warn(`Invalid JSON in localStorage key "${key}"`);
    return null;
  }
}

别省略 try/catch —— 用户用开发者工具乱改、插件干扰、跨域写入失败残留垃圾值，都很常见。

注意存储上限和性能边界

大多数浏览器给每个源分配约 5–10MB localStorage 空间，但它是同步阻塞 API，大体积数据（如 >1MB）读写会卡主线程。实际使用中：

避免存日志、原始图片 base64、未压缩的数组列表
高频更新场景（如打字实时存草稿）用 debounce 控制写入频率，否则频繁 setItem 可能触发性能告警
sessionStorage 虽然自动清理，但大体积数据仍会拖慢 tab 启动速度，尤其在低端设备上

真正容易被忽略的点是：它们都只支持字符串，且没有内置的过期机制 —— 想实现“7天后自动失效”，得自己存时间戳并每次读取时判断，不能依赖 storage 本身。

# javascript # java # js # json # 浏览器 # 电脑 # 工具 # session # 跨域 # 区别 # 作用域 # Object # NULL # count # try # catch # 字符串 # 线程 # 主线程 # undefined # 对象 # http # https # 的是 # 清空 # 都不 # 找不到 # 而在 # 它是 # 都很 # 新开 # 也算 # 报错

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何用AI进行SQL语句的生成与优化？

下一篇：php如何获取嵌套数组下标链_php嵌套下标路径追踪法【教程

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何用AI进行SQL语句的生成与优化？

下一篇：php如何获取嵌套数组下标链_php嵌套下标路径追踪法【教程