sessionstorage适用于单次会话内防刷新丢失的多步骤表单：每步输入后立即保存、页面加载时自动恢复、提交或退出前清理；不跨标签页、不持久化、不发请求，需注意存储上限、同源限制及隐私模式行为。
用 sessionStorage 保存多步骤表单的中间状态，核心是「每步输入后立即存、页面加载时自动读、跳转或提交前清理」。它不跨标签页、不持久化、不发请求，正好匹配「单次会话内防刷新丢失」的需求。
1. 在每一步表单变化时自动保存数据
监听用户输入（input、change、blur），把当前步骤所有字段值序列化为对象，再存入 sessionStorage。推荐用 input 实时存，体验更顺滑：
document.querySelectorAll('.step-1 input, .step-1 select').forEach(el => {
el.addEventListener('input', () => {
const data = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
// 其他字段...
};
sessionStorage.setItem('form-step1', JSON.stringify(data));
});
});
注意：避免在每次按键都调用 JSON.stringify 处理整个表单——只存当前步骤相关字段，减少冗余；也别用 setInterval 轮询，效率低且不可靠。
2. 页面加载时恢复上一步已填内容
在页面初始化（如 DOMContentLoaded）时，检查对应步骤的 sessionStorage 数据，存在就回填：
document.addEventListener('DOMContentLoaded', () => {
const saved = sessionStorage.getItem('form-step1');
if (saved) {
const data = JSON.parse(saved);
document.getElementById('name').value = data.name || '';
document.getElementById('email').value = data.email || '';
}
});
建议加空值判断和 try...catch，防止因存储损坏或格式异常导致脚本中断：
- 用
JSON.parse()前先检查字符串是否非空 - 对
undefined或null字段做兜底赋值（如data.phone ?? ''） - 表单控件类型不同（checkbox、radio、textarea）需分别处理取值/设值逻辑
3. 步骤切换与最终提交时合理管理存储
不要等最后才存——每步都存；也不必每步都清空旧数据——保留前面步骤内容，方便用户返回修改：
- 进入步骤 2 时，保存 step2 数据，同时保留 step1 的
sessionStorage项 - 点击「上一步」时，直接从
sessionStorage读取上一步数据并回填，无需额外请求 - 表单成功提交后，用
sessionStorage.removeItem('form-step1')等逐个清除，或调用sessionStorage.clear()彻底清理（推荐逐个删，避免误清其他业务数据） - 用户主动退出流程（如关闭向导、跳转到其他页面），可监听
beforeunload清理，但注意该事件中不能执行异步操作
4. 注意边界情况和兼容性细节
sessionStorage 在现代浏览器中支持良好（IE8+），但仍有几个实际问题要处理：
- 存储上限约 5–10MB，但多数浏览器实际限制在 5MB 左右；单个 key 值不宜过大，超过几 MB 可能触发 QuotaExceededError
- 同源限制严格：http://a.com 和 https://a.com 视为不同源，数据不共享；子域名间也不互通（a.example.com ≠ b.example.com）
- 隐私模式下部分浏览器会禁用或重置：Safari 无痕模式默认禁用，Chrome 隐私窗口中可用但关闭即清空——这是正常行为，不是 bug
- 不适用于服务端校验场景：它只在前端存在，后端无法访问，所有关键校验仍需服务端重复执行
如果需要跨标签页同步或长期保存，应改用 localStorage 或后端临时存储，但那就超出「防刷新丢失」的原始目标了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
