sessionstorage 是表单多页跳转数据暂存的最优方案——不跨标签页、刷新不丢失、关闭即清空；需实时监听字段变化、按 name 存取、加前缀防重名、页面加载时自动恢复、跨页存筛选条件、敏感字段禁止存储、提交后主动清理，并在隐私模式下降级为内存缓存。

sessionStorage 是处理表单多页跳转时数据暂存最轻量、最贴合场景的方案——它不跨标签页、刷新不丢失、关闭即清空，天然匹配“用户填到一半切走再回来”的真实行为。

实时监听 + 按字段存取

别等用户点“下一步”才保存，那样容易丢数据。在每页表单加载后，给当前页所有可编辑控件（input、textarea、select、[type="checkbox"]、[type="radio"]）绑定 input 事件：

• 文本类取 .value，复选框/单选框取 .checked，下拉框优先用 .value
• 以字段 name 为 key，值为 value，调用 sessionStorage.setItem(name, value)
• 若字段名可能重复（如多个页面都有 email），建议加前缀，比如 step2_email

页面加载时自动恢复

在 DOMContentLoaded 阶段就执行恢复逻辑，而不是等用户操作：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 遍历当前页所有表单字段，对每个 name 尝试读取 sessionStorage.getItem(name)
• 用 try...catch 包裹，避免因存储损坏导致脚本中断
• 文本框直接赋 .value；复选框/单选框必须显式设 .checked = true/false，不能只设 value
• 禁用字段先临时启用再赋值，完成后还原 disabled 状态

跨页跳转时保持上下文连贯

用户从列表页跳详情页、再返回列表页，或在多步骤表单中来回切换，关键不是“存”，而是“怎么存得清、读得准”：

• 跳转前（如点击“查看详情”），把当前筛选条件对象序列化后存为 sessionStorage.setItem('list_filter', JSON.stringify(obj))
• 返回后（如列表页 mounted 或 DOM 加载完成），读取并解析，再同步到搜索表单和分页控件
• 若使用 Vue/React，不要依赖组件缓存（keep-alive），而是统一走 sessionStorage 作为唯一可信数据源
• 敏感字段（如身份证号、银行卡号）绝不存入 sessionStorage

清理与兜底要主动、明确

sessionStorage 不会自动帮你区分“有效草稿”和“过期垃圾”，必须由业务逻辑控制：

• 提交成功后，立即调用 sessionStorage.removeItem('form_step1') 等逐个清除，或用正则批量删掉所有 form_step* 键
• 用户点击“重新开始”或主动退出流程，执行 sessionStorage.clear() 或按前缀清理
• 在隐私模式下，部分浏览器会禁用 sessionStorage，需降级处理：检查 sessionStorage.setItem 是否抛错，失败时降级为内存缓存（仅限当前实例）
• 最终提交前，用统一函数 collectFormData() 从 DOM 实时采集，而非直接读 sessionStorage——防止用户手动修改了 localStorage 值却没同步到界面