使用 localStorage 实现多步骤表单断点续传，核心是每步自动保存（JSON.stringify序列化）与恢复（JSON.parse解析）数据，按业务ID+步骤名生成唯一key，提交成功后及时清理。
使用 localStorage 实现多步骤表单的断点续传，核心是：在每一步填写后自动保存当前数据到本地，用户返回或刷新页面时，从 localStorage 读取并恢复已填内容。
1. 为每一步表单分配唯一标识（key）
避免不同表单或不同用户的数据互相覆盖，建议用业务 ID + 步骤名组合成 key，例如：
-
form-order-step1-20240501-abc123（订单号 + 步骤） -
user-register-step2（固定流程可简化）
若表单有用户登录态，可加入用户 ID；未登录则用临时 ID（如 localStorage.getItem('tempUserId') || Date.now().toString(36) 生成并缓存）。
2. 自动保存每步数据（序列化对象）
监听输入变化（推荐 input 或 blur），获取当前步骤所有字段值，构造成 JS 对象再存入 localStorage：
立即学习“前端免费学习笔记（深入）”；
// 示例：步骤2保存
const step2Data = {
username: document.getElementById('username').value,
email: document.getElementById('email').value,
agree: document.getElementById('agree').checked
};
localStorage.setItem('myForm-step2', JSON.stringify(step2Data));
注意：localStorage 只支持字符串，必须用 JSON.stringify()；布尔、数字、null 等类型都能正确序列化。
3. 页面加载时自动恢复已有数据
在页面初始化（如 DOMContentLoaded）时读取对应 key，解析后填充表单：
const saved = localStorage.getItem('myForm-step2');
if (saved) {
const data = JSON.parse(saved);
document.getElementById('username').value = data.username || '';
document.getElementById('email').value = data.email || '';
document.getElementById('agree').checked = !!data.agree;
}
务必做容错处理：try/catch 捕获 JSON 解析失败，|| '' 防止 undefined 赋值报错。
4. 清理机制：提交成功后清除本地数据
表单最终提交成功（如收到 API 200 响应）后，及时删除所有相关 key，防止残留旧数据干扰下次填写：
localStorage.removeItem('myForm-step1')localStorage.removeItem('myForm-step2')- 或统一前缀批量清理（需自行遍历 key）
也可在用户主动点击「重新开始」时清空。
不复杂但容易忽略：localStorage 是同源、同步、无过期的，别存敏感信息（如密码、身份证号），且注意移动端 Safari 无痕模式下会禁用它——可加一层 try/catch 判断是否可用。
