javascript localStorage是什么_如何在浏览器中存储数据？_网络技术

javascript localStorage是什么_如何在浏览器中存储数据？

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

localStorage数据永久保存、跨会话存在，sessionStorage仅限当前标签页生命周期；二者API相同但生命周期和作用域不同，均受同源策略限制且只支持字符串值，存对象需JSON.stringify/parse。

localStorage 是浏览器提供的持久化键值存储 API，数据不会过期，除非手动清除或用户主动删除。

localStorage 和 sessionStorage 有什么区别？

两者都是 window 对象上的属性，API 完全一致，但生命周期和作用域不同：

localStorage：数据永久保存（实际是“无自动过期”，可跨会话、重启浏览器后仍存在）
sessionStorage：仅在当前标签页生命周期内有效，关闭该标签页即清空
二者都受同源策略限制（协议 + 域名 + 端口必须完全相同）
都不支持存储函数、undefined、Symbol 或循环引用对象

怎么存取 JSON 数据？为什么不能直接存对象？

localStorage 只接受字符串作为值。直接存对象会调用 toString()，结果是 [object Object]，取出来就丢了数据。

正确做法是用 JSON.stringify() 存，JSON.parse() 取：

立即学习“Java免费学习笔记（深入）”；

const user = { name: "Alice", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

const saved = localStorage.getItem("user");
const parsed = saved ? JSON.parse(saved) : null; // 注意判空，getItem 可能返回 null

常见错误：

没处理 getItem 返回 null 就直接 JSON.parse(null) → 报错 Unexpected token 'n' in JSON
存了 undefined 或 function 字段 → JSON.stringify 会忽略它们，还原后字段消失
对象太大（超过 5–10MB，因浏览器而异）→ 触发 QuotaExceededError

怎么安全地删除或清空数据？

有三种粒度的操作方式：

删单个：localStorage.removeItem("key")
清空当前域名下所有：localStorage.clear()（慎用，会影响其他功能模块）
删带前缀的一批（如 app_*）：需遍历 localStorage.key(i) 手动匹配

注意：clear() 不会触发 storage 事件（当前页面不会收到），但其他同源标签页会收到。

监听变化的写法：

window.addEventListener("storage", (e) => {
  console.log("key:", e.key, "old:", e.oldValue, "new:", e.newValue);
});

真正难的是边界情况：比如用户开了多个标签页，一个改了 user，另一个没刷新就继续操作旧数据；或者存了时间戳但没校验有效期。这些得靠业务逻辑补足，localStorage 本身不提供版本或过期能力。

# javascript # java # js # json # 浏览器 # app # 端口 # session # win # 区别 # 作用域

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

上一篇：QQ有linux版本的吗

下一篇：linux怎么查看80端口被哪个进程占用

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

上一篇：QQ有linux版本的吗

下一篇：linux怎么查看80端口被哪个进程占用