前端本地存储对比：sessionStorage 与 localStorage

1. 概述

sessionStorage 和 localStorage 都是 HTML5 Web Storage API 提供的客户端存储机制。它们允许网站以键值对（Key-Value） 的形式，在用户的浏览器中存储字符串数据。

共同点：

两者都存储在浏览器本地，不会随 HTTP 请求自动发送到服务器。
存储的数据只能是字符串（如果要存对象，需使用 JSON.stringify 和 JSON.parse）。
操作方法一致：setItem(), getItem(), removeItem(), clear()。
容量限制大约在 5MB ~ 10MB 之间（不同浏览器略有差异）。

2. 核心区别详解

两者的根本差异在于数据生命周期（有效期）和作用域（共享范围）。

特性	sessionStorage	localStorage
生命周期	会话级：当前标签页或窗口关闭后，数据永久清除。	永久级：数据不会过期，除非用户手动清除浏览器缓存或调用 `clear()` 方法。
作用域	标签页级：仅在创建它的那个特定标签页中有效，同源（同协议、域名、端口）的不同标签页无法共享。	浏览器级：同源下，所有标签页和窗口都可以共享数据。
适用场景	存储临时、一次性的敏感数据，如：<br> - 表单草稿<br> - 页面间的临时状态（如当前滚动位置）<br> - 用户的单次操作校验码	存储长期、持久化的数据，如：<br> - 用户偏好设置（主题、语言）<br> - 保持登录状态（JWT Token）<br> - 缓存的静态数据列表

3. 生命周期对比图解

为了更直观地理解，请看下表：

用户操作	sessionStorage 数据状态	localStorage 数据状态
首次打开页面并存入数据	✅ 存在	✅ 存在
刷新页面 (F5)	✅ 依然存在（会话未结束）	✅ 依然存在
关闭当前标签页	❌数据被彻底清空	✅ 依然存在（永久保存）
在另一个新标签页打开相同网址	❌ 新标签页创建一个全新的、空的存储空间	✅ 可以读取到之前保存的全部数据
关闭浏览器软件（所有标签页）	❌ 所有标签页的会话数据全部丢失	✅ 依然存在（下次打开浏览器时仍在）

4. 作用域与共享规则（关键点）

4.1 sessionStorage 的“复制”现象

虽然正常情况下不同标签页的 sessionStorage 是隔离的，但有一个特例：

如果通过 <a target="_blank"> 或 window.open() 从当前页面打开一个新标签页，新标签页会复制一份源页面的 sessionStorage 数据作为初始值。
重要： 这仅仅是复制，两个标签页的存储空间从此独立。修改任何一方都不会影响另一方。

4.2 localStorage 的“实时”同步

在同一浏览器中，如果两个标签页都打开了同一个网站，它们操作的是同一份 localStorage 数据。
如果一个标签页修改了数据，另一个标签页能立即读取到最新值（但不会自动触发事件，需要监听 storage 事件来通知变化）。

5. 代码使用示例

// 存储数据（两者语法完全一样）
localStorage.setItem('userName', 'Alice');
sessionStorage.setItem('tempToken', 'xyz123');

// 读取数据
const name = localStorage.getItem('userName');   // 输出: Alice
const token = sessionStorage.getItem('tempToken'); // 输出: xyz123

// 存储对象（需转成JSON）
const user = { id: 1, role: 'admin' };
localStorage.setItem('userInfo', JSON.stringify(user));

// 读取对象
const storedUser = JSON.parse(localStorage.getItem('userInfo'));

// 删除特定项
localStorage.removeItem('userName');

// 清空全部（谨慎使用）
// localStorage.clear();

6. 安全性建议

禁止存储极敏感信息：虽然数据存储在本地，但同源下的任意 JavaScript 都可以读取，容易受 XSS（跨站脚本攻击） 威胁。不要存储密码、信用卡号、个人身份证件等高度敏感信息。
sessionStorage 更优：存储一次性校验码（如短信验证码中间态）或临时表单数据时，优先使用 sessionStorage，因为它自带“关闭即焚”特性，风险更低。
大小控制：浏览器的存储是按域名划分的，不要滥用。建议单个值不超过 1MB，总使用量控制在 2MB 以内，以免影响性能。

7. 总结与选型速查

选型判断	推荐使用
数据需要在关闭浏览器后还保留？	localStorage
数据仅用于当前操作，关闭页面即失效？	sessionStorage
数据需要多个标签页共享（如登录态）？	localStorage
数据需要标签页隔离（如多订单草稿）？	sessionStorage
需要存储无状态的临时开关（如“是否已引导用户注册”）？	sessionStorage

一句话总结： 如果你想数据“死了就没了”，用 sessionStorage；如果你想数据“死了还能复活”，用 localStorage。