sessionstorage适合保存当前标签页内临时编辑状态，如表单草稿、筛选条件等，关闭即清空；仅支持字符串，需json序列化，应监听输入防丢失、页面加载时恢复并校验、提交后主动清理。
SessionStorage 适合保存用户在当前浏览器标签页内的临时编辑状态，比如表单未提交前的输入、富文本草稿、筛选条件等。它自动随标签页关闭而清空，无需手动清理，天然契合“临时”需求。
存什么：只缓存可序列化的简单状态
SessionStorage 只支持字符串，所以必须用 JSON.stringify() 存、用 JSON.parse() 取。别直接存函数、DOM 节点或 Date 对象（会变成空对象或报错）。
- ✅ 推荐：普通对象、数组、字符串、数字、布尔值
- ❌ 避免：Date 实例（先转成 ISO 字符串）、正则、undefined、循环引用对象
- 示例：
sessionStorage.setItem('draft', JSON.stringify({ title: '草稿标题', content: '正文...' }))
什么时候存：防丢失的关键时机
不能只靠“提交时再存”，要主动监听变化，及时落盘。尤其注意页面可能被意外关闭（刷新、关页、崩溃）。
- 监听输入事件：对 textarea、input 绑定
input或change（后者适合 select 或 checkbox） - 补充兜底：注册
beforeunload事件，在关闭前强制保存一次 - 避免高频写入：可加简单防抖（如 300ms），防止连续打字频繁操作 Storage
怎么取：页面加载时自动恢复
在组件挂载或页面初始化阶段读取并还原状态，但要注意数据有效性校验。
- 先取值：
const saved = sessionStorage.getItem('draft') - 再解析并校验：
if (saved) { try { const data = JSON.parse(saved); /* 恢复表单 */ } catch(e) { /* 解析失败，忽略或清除 */ } } - 恢复后建议立即清除旧缓存（如果已成功加载），避免下次误用过期数据
什么时候删：主动清理比依赖自动更可靠
SessionStorage 虽然标签页关闭就消失，但用户可能中途提交成功、放弃编辑或切换到其他流程，这时应主动清理。
- 表单提交成功后：
sessionStorage.removeItem('draft') - 用户点击“重置”或“取消”按钮时同步清除
- 避免跨标签干扰：同一个 key 在多个标签页中会互相覆盖，如需隔离，可用动态 key（如加上时间戳或随机 ID）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
