SessionStorage 适合多步流程临时缓存，可保存当前步骤索引和按步骤隔离的表单数据，刷新后恢复但关闭标签页即失效；需避免存储敏感信息，完成流程后及时清理，注意同源限制与存储上限。
SessionStorage 可以在步骤条导航中保存用户当前所处的步骤、已填写的表单数据等临时状态，页面刷新后仍能恢复到上一步，但关闭标签页即失效，正适合多步流程的临时缓存。
用 SessionStorage 记录当前步骤索引
每次切换步骤时，把当前步骤编号（如 0、1、2）存入 SessionStorage：
- 使用 sessionStorage.setItem('currentStep', String(stepIndex)) 保存
- 进入页面时用 const savedStep = sessionStorage.getItem('currentStep') 读取
- 若存在有效值（非 null 且为数字），就跳转到对应步骤；否则默认从第 0 步开始
缓存每步的表单数据（按步骤键名隔离）
避免所有字段挤在一个 key 里，推荐按步骤组织数据：
- 第 1 步（step1）的数据存为 sessionStorage.setItem('step1_data', JSON.stringify(formData1))
- 第 2 步存为 'step2_data'，依此类推
- 回退或刷新时，根据 currentStep 值动态读取对应 key，再 JSON.parse() 恢复表单
- 注意：只缓存必要字段，敏感信息（如密码、身份证号）不应存入 SessionStorage
离开步骤时自动保存 + 清理过期数据
提升体验的关键细节：
立即学习“Java免费学习笔记（深入）”；
- 在点击“下一步”或“上一步”前，先调用保存逻辑，确保当前步数据不丢失
- 用户完成全流程后，主动调用 sessionStorage.removeItem('currentStep') 和各 step_data key，或直接 sessionStorage.clear()
- 可监听 beforeunload 补充保存，但注意该事件中不能执行异步操作
兼容性与注意事项
SessionStorage 在现代浏览器中支持良好，但需留意：
- 同源限制严格：http://a.com 和 https://a.com 视为不同源，数据不共享
- 存储上限约 5–10MB（因浏览器而异），单个字符串不宜过大
- 不适用于跨标签页同步 —— 如果需要多标签协同，得换用 localStorage + storage 事件或 IndexedDB
- 调试时可在浏览器开发者工具的 Application → Storage → Session Storage 中实时查看和修改
