JS如何操作浏览器存储？LocalStorage与SessionStorage怎么选？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JS如何操作浏览器存储？LocalStorage与SessionStorage怎么选？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

LocalStorage用于长期存储，关闭浏览器仍保留；SessionStorage仅限当前标签页，关闭即清除；二者均遵循同源策略，仅支持字符串，容量约5–10MB。

JavaScript操作浏览器存储，主要靠 LocalStorage 和 SessionStorage 两个 Web Storage API。它们都以键值对（key-value）形式保存字符串数据，用法相似，但生命周期和作用域不同——选哪个，关键看你要存的数据“活多久”“在哪儿用”。

LocalStorage：关掉浏览器也不丢，适合长期缓存

LocalStorage 的数据会一直保留在用户设备上，除非手动清除（比如调用 localStorage.clear() 或用户在浏览器设置里删除），即使关闭标签页、重启浏览器甚至电脑，数据依然存在。

• 适用场景：用户偏好设置（如主题色、语言）、登录态标识（配合后端 token 验证）、离线内容缓存（如文章草稿、商品列表）
• 注意：不能存敏感信息（如密码、完整 token），因为它是纯前端可读的，且无自动过期机制
• 基本操作示例：
  localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');

SessionStorage：只活在当前标签页，关了就清空

SessionStorage 的数据仅在当前浏览器标签页（或窗口）中有效，页面刷新不丢失，但一旦关闭该标签页，所有数据自动销毁。同一域名下的不同标签页之间互不共享。

• 适用场景：表单临时数据（如多步填写未提交的订单信息）、一次性验证码、页面内状态快照（如筛选条件暂存）
• 优势：天然隔离，避免跨标签页干扰；安全性略高于 LocalStorage（生命周期短，攻击窗口小）
• 基本操作与 LocalStorage 完全一致，只是把 localStorage 换成 sessionStorage

别只看“存多久”，还要看“谁能看到”

两者都遵循同源策略（same-origin policy），即只有相同协议、域名、端口的脚本才能访问对应存储。但要注意：

• HTTP 和 HTTPS 视为不同源，数据不互通
• 子域名间默认不共享（shop.example.com 和 blog.example.com 无法互相读取）
• 如果需要跨子域名共享，需配合 document.domain（已逐步被弃用）或后端接口中转

容量和兼容性：够用，但别当数据库用

大多数浏览器给每个源分配约 5–10MB 存储空间（远大于 Cookie 的 4KB），支持 IE8+、所有现代浏览器。不过它只支持字符串值：

• 存对象？先 JSON.stringify()；取出来再 JSON.parse()
• 频繁读写大量数据会影响性能，不适合替代 IndexedDB 做复杂结构化存储
• 没有监听变更的原生事件（可用 storage 事件监听同源其他标签页的修改，但当前页修改不会触发自身）

不复杂但容易忽略：选 LocalStorage 还是 SessionStorage，本质是在问——这个数据，用户下次打开网页时还需要吗？需要，就 Local；只服务于这一次交互，就 Session。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS如何操作浏览器存储？LocalStorage与SessionStorage怎么选？》文章吧，也可关注golang学习网公众号了解相关技术文章。