sessionstorage用于当前标签页会话期临时存储，关闭即清空，适合表单草稿等；通过setitem/getitem/removeitem/clear操作，值自动转字符串，对象需json序列化；标签页隔离，不跨窗口共享，不可存敏感信息，注意存储上限与隐私模式兼容性。
sessionStorage 用于在当前浏览器标签页的会话周期内存储临时数据，关闭标签页即自动清空，适合保存表单草稿、页面状态、临时筛选条件等不跨标签共享的数据。
存取数据：用 key-value 方式操作
sessionStorage 提供 setItem()、getItem()、removeItem() 和 clear() 四个核心方法，所有值都会被自动转为字符串存储：
-
存数据：`sessionStorage.setItem('userName', '张三')` —— 注意，即使传入对象或数字，也会调用
.toString()，所以要存对象需手动 JSON 序列化：sessionStorage.setItem('user', JSON.stringify({id: 1, name: '李四'})) -
取数据：`const userStr = sessionStorage.getItem('user')`，拿到的是字符串，需用
JSON.parse(userStr)还原（建议加 try-catch 防止解析失败） - 删单个：`sessionStorage.removeItem('tempSearch')`
- 全清空：`sessionStorage.clear()` —— 仅清除当前标签页的 sessionStorage，不影响其他标签页或 localStorage
注意作用域：标签页隔离，不跨窗口共享
每个浏览器标签页（包括通过 window.open() 打开的新窗口）都有独立的 sessionStorage 实例。即使同源，A 标签页存的数据，在 B 标签页里完全不可见。这点和 localStorage 不同，也意味着刷新页面不会丢失数据，但关掉标签就没了。
如果需要跨标签通信，不能依赖 sessionStorage，得改用 localStorage + storage 事件、BroadcastChannel 或 URL 参数等方式。
常见误用与规避建议
- 别存敏感信息：sessionStorage 数据可被同源脚本直接读取，不具安全性，切勿存放 token、密码、身份证号等
-
留意存储上限：多数浏览器限制在 5–10MB 左右，超限会抛出
QuotaExceededError，写入前可用 try-catch 捕获处理 -
避免直接赋值：`sessionStorage.key = 'value'` 写法无效（不会报错但不生效），必须用
setItem() -
检查是否可用：部分隐私模式（如 Safari 无痕）可能禁用 sessionStorage，使用前建议简单探测：
try { sessionStorage.setItem('test', 'ok'); sessionStorage.removeItem('test'); } catch(e) { /* 降级处理 */ }
实用小技巧：封装一个安全的会话存储工具
可以封装一个轻量工具类，自动处理 JSON 序列化/反序列化、错误捕获和类型校验：
const SessionStore = {
set(key, value) {
try {
const str = JSON.stringify(value);
sessionStorage.setItem(key, str);
} catch (e) {
console.warn(`SessionStore.set failed for ${key}`, e);
}
},
get(key, defaultValue = null) {
try {
const str = sessionStorage.getItem(key);
return str ? JSON.parse(str) : defaultValue;
} catch (e) {
console.warn(`SessionStore.get parse failed for ${key}`, e);
return defaultValue;
}
},
remove(key) {
sessionStorage.removeItem(key);
}
};这样调用更直观：SessionStore.set('cartItems', [{id: 1, qty: 2}])，取的时候也自动还原为数组或对象。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
