如何用 sessionStorage 记录用户在多步骤表单中的填写状态-js教程-PHP中文网

sessionStorage 适合存多步骤表单状态，但仅限单次会话内未完成的草稿；它不跨标签页同步、关闭浏览器即清空、不触发 StorageEvent，比 localStorage 更干净。

如何用 sessionstorage 记录用户在多步骤表单中的填写状态

sessionStorage 适合存多步骤表单状态吗？

适合，但仅限「单次会话内未完成的草稿」。它不跨标签页同步，关掉浏览器就清空，也不触发 StorageEvent（除非同源其他页面显式调用 sessionStorage.setItem），这点和 localStorage 有本质区别。如果你需要恢复上次未提交的填写内容，又不希望它长期残留，sessionStorage 是更干净的选择。

怎么把每一步表单数据结构化存进去？

别直接存原始 DOM 值或拼接字符串。应该统一为对象，按步骤 key 分层，例如：step1、step2。每次离开当前步（比如点击“下一步”）时，把该步所有字段收集为一个扁平对象，再用 JSON.stringify 存入 sessionStorage。注意过滤掉空值或默认值，避免污染后续判断。

示例：

// 收集 step2 字段
const step2Data = {
  email: document.getElementById('email').value.trim(),
  phone: document.getElementById('phone').value.trim(),
  agree: document.getElementById('agree').checked
};
sessionStorage.setItem('form_step2', JSON.stringify(step2Data));

关键点：

每个步骤用独立 key（如 form_step1），避免覆盖
存前做 JSON.stringify，取时必须 JSON.parse 并加 try/catch
不要存函数、DOM 节点、Date 对象等无法序列化的值

用户刷新页面后如何自动恢复？

在每一步组件挂载或表单初始化时，立刻检查对应 key 是否存在，并尝试还原。不是等用户点“上一步”才恢复——那是体验断层。重点是：还原后要同步更新 React/Vue 状态或原生表单元素的 value 和 checked 属性。

常见错误：

光子AI

一款AI视频创作工具，主要用于AI电商服饰商拍平台，适合需要提升相关任务效率的用户。

下载

只还原了状态变量，但没触发表单控件的视图更新（尤其原生 JS 场景下容易漏掉 input.value = xxx）
还原时没处理 null 或 undefined，导致 JSON.parse 报错 SyntaxError: Unexpected token u in JSON at position 0
多个步骤共用同一个 key，导致后存的覆盖先存的

安全读取写法：

function getStepData(stepKey) {
  const raw = sessionStorage.getItem(`form_${stepKey}`);
  if (!raw) return {};
  try {
    return JSON.parse(raw);
  } catch (e) {
    console.warn(`Invalid JSON in sessionStorage for ${stepKey}`, e);
    return {};
  }
}
// 使用
const saved = getStepData('step2');
if (saved.email) document.getElementById('email').value = saved.email;
if ('agree' in saved) document.getElementById('agree').checked = saved.agree;