HTML表单数据备份怎么处理_HTML表单提交数据备份与恢复的实现方法

<form id="userForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="email" name="email" placeholder="邮箱">
  <textarea name="message" placeholder="留言"></textarea>
  <button type="submit">提交</button>
</form>

const form = document.getElementById('userForm');
const fields = ['username', 'email', 'message'];
const formKey = 'backup_userForm';

// 恢复数据
function restoreData() {
  const s*ed = localStorage.getItem(formKey);
  if (s*ed) {
    const data = JSON.parse(s*ed);
    fields.forEach(name => {
      const field = form[name];
      if (field && data[name]) {
        field.value = data[name];
      }
    });
    alert('检测到未提交的数据，已自动恢复');
  }
}

// 保存数据
function s*eData() {
  const data = {};
  fields.forEach(name => {
    data[name] = form[name].value;
  });
  localStorage.setItem(formKey, JSON.stringify(data));
}

// 监听输入
fields.forEach(name => {
  form[name].addEventListener('input', debounce(s*eData, 500));
});

// 首次加载尝试恢复
restoreData();

// 表单提交后清除备份
form.addEventListener('submit', () => {
  localStorage.removeItem(formKey);
});

// 简易防抖函数
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

<button type="button" onclick="s*eDraft()">保存草稿</button>
<button type="button" onclick="loadDraft()">恢复草稿</button>

function s*eDraft() {
  const data = {
    username: form.username.value,
    email: form.email.value,
    message: form.message.value
  };
  localStorage.setItem('draft_' + formKey, JSON.stringify(data));
  alert('草稿已保存');
}

function loadDraft() {
  const s*ed = localStorage.getItem('draft_' + formKey);
  if (s*ed) {
    const data = JSON.parse(s*ed);
    if (confirm('确认恢复草稿内容？')) {
      Object.keys(data).forEach(key => {
        if (form[key]) form[key].value = data[key];
      });
    }
  } else {
    alert('没有找到草稿');
  }
}