JavaScript本地存储含localStorage和sessionStorage:前者数据持久保存、同源共享,适合长期设置;后者仅限当前标签页会话、隔离独立,适用于临时状态。

JavaScript本地存储是浏览器提供的一组客户端数据存储机制,让网页能在用户设备上保存少量结构化数据,无需依赖服务器或网络请求。它属于 Web Storage API,核心包括 localStorage 和 sessionStorage 两个对象。
数据生命周期不同
localStorage 中的数据没有过期时间,只要不手动清除(比如调用 clear() 或 removeItem()),即使关闭浏览器、重启电脑,数据依然存在。适合存用户主题偏好、语言设置、登录态标识等需要长期保留的信息。
sessionStorage 中的数据只在当前浏览器标签页的会话期间有效。关闭该标签页(或窗口)后,数据自动清空;但刷新页面、页面内跳转、甚至通过 window.open() 打开的新窗口(同源)仍可访问——前提是没关掉原始标签页。
作用域范围不同
两者都遵循“同源策略”(协议 + 域名 + 端口相同才算同源),但具体共享方式有差异:
立即学习“Java免费学习笔记(深入)”;
-
localStorage 同源共享:同一网站的所有标签页、窗口都能读写同一份数据。例如,在 https://example.com 的两个标签页中,
localStorage.setItem('count', '5')在任一标签页执行后,另一标签页也能立刻读到'5'。 - sessionStorage 标签页隔离:每个标签页拥有完全独立的 sessionStorage。打开两个相同的 URL,它们的 sessionStorage 互不影响,无法跨标签通信。
使用方式和限制一致
两者 API 完全相同,常用方法包括:
-
setItem(key, value):存数据(value 必须是字符串) -
getItem(key):取数据 -
removeItem(key):删单个项 -
clear():清空全部
注意:如果要存对象或数组,必须先用 JSON.stringify() 转为字符串;读取时再用 JSON.parse() 还原。直接存对象会自动调用 .toString(),导致数据丢失。
适用场景怎么选?
选 localStorage 当你需要:
- 记住用户上次选择的暗色模式
- 缓存离线可用的配置或静态内容
- 保存用户填写过的表单草稿(跨会话恢复)
选 sessionStorage 当你需要:
- 暂存多步骤表单的中间状态(防止刷新丢失)
- 传递登录后临时 token 给重定向后的页面
- 实现单页应用中某次导航链路内的上下文数据(如筛选条件)











