你有没有过这样的经历：关掉网页再重新打开，购物车里的商品还在，可刚填了一半的表单却清空了？这背后实则藏着浏览器存储的小秘密——sessionStorage和localStorage。今天咱们用3分钟彻底搞懂它们的区别，后来写代码再也不会用错啦！

一图看懂核心区别

先上一张对比图，直观感受下两者的差异：

简单说，localStorage是“永久仓库”，sessionStorage是“临时货架”。具体区别咱们用表格捋一捋：

二、关键差异：3个“不一样”

1. 生命周期：一个“长生不老”，一个“昙花一现”

• localStorage：数据会永久保存在浏览器里，哪怕你关掉电脑重启，下次打开网页数据还在。列如你在某网站设置了“深色模式”，关闭网页再打开还是深色，这就是localStorage的功劳。
• sessionStorage：数据只在当前标签页“活着”。列如你在购物网站新开一个标签页，原来标签页的sessionStorage数据，新标签页根本拿不到；一旦关掉标签页，数据就会被浏览器自动删除。

2. 作用域：一个“共享社区”，一个“私人空间”

• localStorage：同一域名下的所有标签页是“共享社区”。列如你在Chrome的“淘宝”标签页存了数据，新开一个“淘宝”标签页也能读到。
• sessionStorage：每个标签页都是“私人空间”。列如你同时打开两个“在线文档”标签页，各自的sessionStorage数据完全独立，不会相互干扰。

3. 常用API：操作方法“长得像”，但效果大不同

两者的使用方法几乎一样，都是通过setItem存数据、getItem取数据、removeItem删数据。举个例子：

// 存数据  
localStorage.setItem('theme', 'dark'); // 永久保存“深色模式”设置  
sessionStorage.setItem('formData', JSON.stringify({name: '张三'})); // 临时保存表单数据  

// 取数据  
const theme = localStorage.getItem('theme'); // 读取主题设置  
const formData = JSON.parse(sessionStorage.getItem('formData')); // 读取表单数据  

// 删数据  
localStorage.removeItem('theme'); // 删除主题设置  
sessionStorage.clear(); // 清空当前标签页所有临时数据  

三、正确用法：这3个场景千万别用错

1. localStorage：适合“长期存档”

• 用户偏好设置：列如主题、语言、字体大小等，一次设置永久生效。
• 离线数据缓存：新闻网站缓存用户没看完的文章，断网时也能查看。
• 长期登录状态：记住用户登录状态（但注意！别存密码，存个token就行）。

案例：某视频网站用localStorage保存用户的“播放历史”，用户下次打开还能接着看，不用重新加载（来源：腾讯云开发者社区）。

2. sessionStorage：适合“临时周转”

• 表单草稿保存：用户填写长表单（如注册、报名）时，刷新页面数据不丢失。
• 敏感信息临时存储：列如一次性验证码、临时登录令牌，关闭页面自动销毁，更安全。
• 单页应用状态管理：记录当前页面的选项卡切换、滚动位置等，刷新页面恢复原状。

案例：某银行官网的“转账表单”用sessionStorage保存填写内容，用户不小心刷新页面，金额、收款人信息还在，不用重填（来源：阿里云开发者社区）。

3. 这3件事千万别做！

• ❌ 别存敏感信息：两者都容易被XSS攻击窃取，密码、银行卡号坚决不能存！
• ❌ 别存太大数据：超过5MB会报错，大量数据提议用IndexedDB。
• ❌ 别依赖“永久存储”：用户清除浏览器缓存时，localStorage数据会被删掉。

四、安全小贴士：3招避免踩坑

1. 敏感数据加密：如果必须存token等信息，先用AES加密（列如用CryptoJS库），再存到localStorage。
2. 防XSS攻击：对用户输入的内容严格过滤，避免恶意脚本注入（列如用DOMPurify库清洗HTML）。
3. 定期清理：给localStorage数据加个“过期时间”，列如存数据时记录时间戳，读取时判断是否过期。

总结：3句话记住用法

• 想永久保存，用localStorage：用户偏好、离线缓存就靠它。
• 临时存数据，用sessionStorage：表单草稿、临时令牌选它准没错。
• 敏感数据别碰它：安全第一，密码之类的交给Cookie的HttpOnly属性！

最后送大家一张“浏览器存储机制图解”，帮你理清所有存储方式的关系：

目前，你能分清sessionStorage和localStorage了吗？评论区说说你踩过哪些存储的坑吧！