localStorage 持久存储,关闭浏览器不丢失;sessionStorage 仅限当前标签页会话,关闭即清空。二者均以字符串键值对存储,API 相同,容量约 5–10 MB,不参与网络请求,且均不安全,不可存敏感信息。

JavaScript 通过 localStorage 和 sessionStorage 提供了两种客户端存储机制,它们都以键值对(字符串)形式保存数据,但生命周期和作用域不同——localStorage 持久保存,除非手动清除;sessionStorage 仅在当前标签页会话期间有效,关闭标签即清空。
基本操作方法一致
两者 API 完全相同,常用方法包括:
-
setItem(key, value):存入数据(value 会被自动转为字符串) -
getItem(key):读取数据,返回字符串或null -
removeItem(key):删除指定键 -
clear():清空所有键值对 -
key(index):获取第 index 个键名(用于遍历) -
length:返回当前存储的键值对数量
注意:只能存字符串。若要存对象或数组,需先用 JSON.stringify() 序列化,读取时用 JSON.parse() 还原。
localStorage:跨会话持久存储
数据保存在浏览器中,不随页面刷新、关闭浏览器或重启电脑而丢失,有效期为永久(除非用户手动清除或代码调用 clear()/removeItem())。
立即学习“Java免费学习笔记(深入)”;
适用场景:
- 用户偏好设置(如主题色、语言)
- 长期缓存非敏感数据(如首页推荐列表)
- 离线状态下的临时数据暂存
示例:localStorage.setItem('theme', 'dark') 后,下次打开网页仍可读到 'dark'。
sessionStorage:单标签页会话级存储
数据只在当前浏览器标签页(tab)内有效,页面刷新保留,但关闭该标签页后数据立即销毁;新开标签页或窗口互不共享。
适用场景:
- 表单草稿(防止意外刷新丢失)
- 登录态中间状态(如 OAuth 跳转时暂存回调参数)
- 单页应用中路由级临时状态(如搜索关键词、筛选条件)
示例:sessionStorage.setItem('searchQuery', 'JavaScript'),刷新页面还在,关掉这个标签就没了。
关键区别总结
对比维度如下:
- 生命周期:localStorage 永久;sessionStorage 仅限当前 tab 的会话(从打开到关闭)
- 作用域:两者都在同源(协议+域名+端口)下隔离;但 sessionStorage 还额外按 tab 隔离,不同 tab 即使同页面也互不可见
- 容量限制:通常都是 5–10 MB(因浏览器而异),远大于 Cookie(4 KB)
- 是否参与网络请求:都不发送给服务器(与 Cookie 不同)
- 安全性:均易被 XSS 攻击读取,切勿存储密码、token 等敏感信息











