多步骤表单如何保持用户输入不丢失？

这问题我之前也踩过，用 state 存确实不靠谱，刷新一下什么都没了。

最直接的解决办法是用 localStorage，刷新页面数据还在。具体做法是每一步切换时把表单数据存入 localStorage，页面加载时再取出来填充。

改一下你的代码：

// 定义 localStorage 的 key

const STORAGE_KEY = 'multi_step_form_data';



// 保存数据到 localStorage

function saveFormData() {

  const form = document.querySelector('form');

  const formData = new FormData(form);

  const data = {};

  

  for (let [key, value] of formData.entries()) {

    data[key] = value;

  }

  

  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));

}



// 从 localStorage 恢复数据

function loadFormData() {

  const saved = localStorage.getItem(STORAGE_KEY);

  if (saved) {

    const data = JSON.parse(saved);

    const form = document.querySelector('form');

    

    Object.keys(data).forEach(key => {

      const input = form.querySelector([name="${key}"]);

      if (input) {

        input.value = data[key];

      }

    });

  }

}



// 页面加载时恢复数据

loadFormData();



// 下一步时保存当前数据

function nextStep() {

  saveFormData();  // 切到下一步前先把数据存起来

  

  document.querySelector('.step-1').classList.add('hidden');

  document.querySelector('.step-2').classList.remove('hidden');

}



// 如果有上一步，也需要保存

function prevStep() {

  saveFormData();

  

  document.querySelector('.step-1').classList.remove('hidden');

  document.querySelector('.step-2').classList.add('hidden');

}



// 表单提交时清空 localStorage（可选，看你需求）

function submitForm() {

  saveFormData();

  // 提交逻辑...

  

  // 提交成功后清空

  localStorage.removeItem(STORAGE_KEY);

}

几个小提示：

第一步切换时调用 saveFormData()，这样用户切到第二步后刷新，之前填的 email 还在。页面加载时 loadFormData() 会自动把 localStorage 里的数据填回去。

如果用户最终提交成功了，记得调 localStorage.removeItem() 清掉存的数据，不然下次打开表单还会显示旧数据。

这个方案比存后端 session 省事，适合你这种纯前端表单的场景。唯一的缺点是换浏览器数据就不共享了，如果需要那种场景就得走服务器端存储。

这种情况最稳妥的办法是用浏览器的 localStorage 或者 sessionStorage 做暂存。单纯靠内存里的 state 或者 DOM 肯定扛不住刷新。

其实可以优化成“自动保存”模式，不用非得点下一步才存。监听一下 input 事件，用户打字的时候就把数据存进 localStorage，页面刷新或者回退的时候，再从里面读出来填回去。这样体验最顺滑，也不用担心误操作丢失数据。

代码大概是这样写的，直接拿去用就行：

const form = document.querySelector('form');

const STORAGE_KEY = 'register_draft';



// 自动保存：表单有任何变动就存

form.addEventListener('input', () => {

    const formData = new FormData(form);

    const data = Object.fromEntries(formData.entries());

    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));

});



// 自动回填：页面加载时检查有没有存档

window.addEventListener('DOMContentLoaded', () => {

    const savedData = localStorage.getItem(STORAGE_KEY);

    if (savedData) {

        const data = JSON.parse(savedData);

        // 遍历数据回填到对应的 input

        Object.keys(data).forEach(key => {

            const input = form.elements[key];

            if (input) input.value = data[key];

        });

    }

});



// 提交成功后记得清空存档，不然下次来还是旧数据

function submitForm() {

    // ... 你的提交逻辑

    localStorage.removeItem(STORAGE_KEY);

}

这样一来，不管是切步骤还是手滑刷新，数据都在。唯一的缺点是如果用户换台电脑，数据是带不走的，不过注册流程嘛，通常也没这需求，够用了。