JavaScript 中 SessionStorage 怎么在多步骤表单中临时保存进度-js教程-PHP中文网

sessionstorage 适合多步骤表单临时存进度，按步骤或字段名分 key 存储、精准恢复、跳转/刷新不丢失，提交成功后主动清除相关 key。

javascript 中 sessionstorage 怎么在多步骤表单中临时保存进度

SessionStorage 很适合在多步骤表单中临时保存用户填写的进度，它会自动在浏览器标签页关闭后清空，既安全又无需后端参与。

用 key-value 方式存每一步的数据

不要把整个表单对象一次性塞进一个 key 里，而是按步骤或字段名分开存储，方便后续读取和校验。比如第一页填了姓名和邮箱，可以这样存：

// 第一步提交后
sessionStorage.setItem('step1_name', '张三');
sessionStorage.setItem('step1_email', 'zhang@example.com');
<p>// 第二步提交后
sessionStorage.setItem('step2_phone', '13800138000');
sessionStorage.setItem('step2_address', '北京市朝阳区...');</p>

这样做的好处是：某一步修改时只更新对应 key；跳回上一步时能精准还原字段，不会因对象嵌套深导致赋值出错。

页面加载时自动恢复已填内容

每次进入表单任意步骤，都应尝试从 sessionStorage 中读取对应字段，并填充到表单控件中。建议封装一个通用恢复函数：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

function restoreFormFields(prefix) {
  const form = document.querySelector('form');
  const inputs = form.querySelectorAll('input, select, textarea');
  inputs.forEach(input => {
    const key = `${prefix}_${input.name}`;
    const saved = sessionStorage.getItem(key);
    if (saved !== null) {
      input.value = saved;
      // 处理 checkbox/radio 的 checked 状态
      if (input.type === 'checkbox' || input.type === 'radio') {
        input.checked = saved === 'true';
      }
    }
  });
}
<p>// 进入 step2.html 时调用
restoreFormFields('step2');</p>

用户主动退出或刷新时保留进度

SessionStorage 本身在页面刷新后依然存在，但要注意：如果用户通过链接跳转（如 a 标签）或 location.href 跳转，只要没关闭标签页，数据仍在。唯一需注意的是 SPA 路由切换——某些框架（如 Vue Router）默认不触发页面刷新，此时需手动监听路由变化并保存当前步数据：

在离开当前步骤前（比如点击“下一步”按钮），先执行保存逻辑
避免依赖 beforeunload 事件，它无法可靠捕获所有跳转场景
表单输入过程中可加防抖保存（例如 500ms 无操作后存一次），防止频繁写入

清理数据的合理时机

完成提交成功后，应当主动清除所有相关 sessionStorage 数据，避免残留影响下一次填写：

// 提交成功回调中
['step1_name', 'step1_email', 'step2_phone', 'step2_address'].forEach(key => {
  sessionStorage.removeItem(key);
});
// 或更简单：只删带特定前缀的 key
for (let i = sessionStorage.length - 1; i >= 0; i--) {
  const key = sessionStorage.key(i);
  if (key.startsWith('step')) {
    sessionStorage.removeItem(key);
  }
}

不需要等用户关闭页面，也不用设定时器清理——sessionStorage 本就是会话级，关掉标签就没了，主动清只是让体验更干净。