javascript如何操作浏览器存储？【教程】_网络技术

javascript如何操作浏览器存储？【教程】

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

localStorage和sessionStorage仅支持字符串值，存对象需JSON.stringify()编码、取时用JSON.parse()解码；二者区别在于生命周期（持久化vs标签页级）和作用域（同源共享vs单页隔离）；读写应封装容错逻辑并注意JSON局限性与环境限制。

JavaScript 操作浏览器存储，核心就两条路：localStorage 和 sessionStorage，它们够用、兼容好、不用额外依赖。但直接塞对象或函数会出错，读写前必须处理类型。

为什么 `localStorage.setItem()` 存不了对象？

因为 localStorage 只接受字符串作为值。传入对象（比如 {name: "Alice"}）时，它会自动调用 .toString()，结果变成 "[object Object]"，数据彻底丢失。

正确做法：存之前用 JSON.stringify() 编码
取出来后必须用 JSON.parse() 解码，否则拿到的是字符串而非原始结构
如果值是 null、undefined 或函数，JSON.stringify() 会忽略或转成 null，这类值无法可靠存储

`localStorage` 和 `sessionStorage` 到底怎么选？

区别不在“本地”还是“会话”，而在于生命周期和作用域：

localStorage：关闭标签页不丢，除非手动清除或代码调用 localStorage.clear()；同源（协议+域名+端口）下所有窗口共享
sessionStorage：仅当前标签页有效，关掉该页即清空；即使同源，新开的标签页也拿不到原页存的数据
两者 API 完全一致（setItem/getItem/removeIt em/clear），替换使用几乎零成本

如何安全地读写带默认值的存储项？

直接调用 localStorage.getItem("key") 返回可能是 null，不判空就 JSON.parse(null) 会报错：Unexpected token 'n' in JSON at position 0。

推荐封装一个读取函数，自动处理 null 和解析失败：

function getStorage(key, defaultValue = null) {
  const raw = localStorage.getItem(key);
  if (raw == null) return defaultValue;
  try {
    return JSON.parse(raw);
  } catch {
    return defaultValue;
  }
}

写入时也建议加 try/catch，因为用户可能禁用存储、或超出 5MB 限额（不同浏览器略有差异），此时 setItem 会抛 QuotaExceededError

真正容易被忽略的不是语法，而是边界情况：JSON 不支持 Date、RegExp、undefined、循环引用；跨域 iframe 无法访问父页的 localStorage；私密模式下部分浏览器会限制写入权限。这些不会立刻报错，但会在特定环境里静默失效。

# javascript # java # js # json # 编码 # 浏览器 # 端口 # session # 跨域 # 区别 # 作用域

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

上一篇：如何为一个非公开的Composer包编写和托管文档？（文档即

下一篇：VSCode快捷键备忘单：打印出来贴墙上

相关栏目网站优化
网络推广
网络技术
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

上一篇：如何为一个非公开的Composer包编写和托管文档？（文档即