sessionstorage是浏览器提供的单标签页临时存储机制，刷新保留、关tab清除，适合存轻量可序列化状态；存对象需json.stringify/parse，应防抖写入、早读按需用，并注意同源隔离、容量限制与敏感信息风险。
SessionStorage 是浏览器提供的轻量级临时存储机制，只在当前标签页（或窗口）的会话生命周期内有效，关闭该标签页后数据自动清除。它适合保存表单草稿、页面状态、临时筛选条件等不需要跨会话持久化的数据。
基本用法：存、取、删
SessionStorage 提供了类似对象的 API，但所有值都会被自动转为字符串存储，读取时需自行转换类型：
-
存数据：用
sessionStorage.setItem(key, value)，value 会被强制转为字符串
例如：sessionStorage.setItem('userPref', JSON.stringify({theme: 'dark', lang: 'zh'})) -
取数据：用
sessionStorage.getItem(key)，返回字符串，需手动解析
例如：const pref = JSON.parse(sessionStorage.getItem('userPref')) -
删除单个：用
sessionStorage.removeItem(key) -
清空全部：用
sessionStorage.clear()
注意 key 命名和作用域限制
同一个协议 + 域名 + 端口下的页面共享同一份 sessionStorage，但不同标签页互不干扰——即使打开同一 URL 的两个标签页，它们的 sessionStorage 也是完全独立的。
- 避免使用通用 key（如
'data'），建议加业务前缀，比如'cart-temp-2024' - 不要依赖 sessionStorage 在多个标签页间同步状态，它不是为此设计的；需要跨标签通信请用
localStorage + storage 事件或 BroadcastChannel
常见实用场景示例
比如用户填写长表单中途离开，可自动保存草稿：
- 监听输入框变化：
input.addEventListener('input', () => { sessionStorage.setItem('form-draft', JSON.stringify(formData)); }) - 页面加载时恢复：
const draft = sessionStorage.getItem('form-draft'); if (draft) fillForm(JSON.parse(draft)); - 提交成功后及时清理：
sessionStorage.removeItem('form-draft');
与 localStorage 的关键区别
别混淆两者：
- 生命周期：sessionStorage 仅限当前会话（关闭标签即清空）；localStorage 持久存在，除非手动删除
- 作用域：sessionStorage 不同标签页隔离；localStorage 同源下所有标签页共享
-
容量限制：两者通常都是 5MB 左右，但具体取决于浏览器，超出会抛出
QuotaExceededError
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
