表单提交后数据未存入localStorage仅刷新可见，跨浏览器无数据问题咨询

问题原因说明 #

问题1：提交后看不到localStorage数据，刷新才可见 #

你的表单默认走原生提交逻辑，点击提交按钮后会直接跳转到action指定的formspree域名页面：

• localStorage受同源策略限制，仅同域名下可访问，跳转到formspree域名后自然看不到你原站点存储的数据
• 你退回原表单页刷新后，读取的是输入过程中oninput触发存储在原域名下的数据，所以能正常看到
  你以为是提交后才存数据，实际上你输入内容的过程中oninput已经把数据写入localStorage了，只是提交跳转后跨域看不到而已

问题2：其他浏览器看不到localStorage数据 #

localStorage是浏览器本地沙箱存储，数据仅存在当前用户的当前浏览器本地，不会跨设备、跨浏览器、跨终端同步，这是浏览器的原生特性，不是代码问题。

解决方法 #

修复提交跳转问题 #

阻止表单默认提交行为，改用AJAX异步提交表单数据，页面不会跳转，提交后仍停留在原站点，就能直接看到localStorage数据。
修改后的代码如下：

JavaScript代码

const form = document.querySelector('form');
const formName = document.getElementById('name');
const email = document.getElementById('email');
const message = document.getElementById('message');

let formData = { name: '', email: '', message: '' };

// 原有输入存储逻辑不变
const onChangeHandler = (event) => {
  switch (event.name) {
    case 'name':
      formData = { ...formData, name: event.value };
      break;
    case 'email':
      formData = { ...formData, email: event.value };
      break;
    case 'message':
      formData = { ...formData, message: event.value };
      break;
    default:
      break;
  }
  localStorage.setItem('data', JSON.stringify(formData));
};

// 新增表单提交监听
form.addEventListener('submit', async (e) => {
  // 阻止默认跳转
  e.preventDefault();
  try {
    const res = await fetch(form.action, {
      method: form.method,
      body: new FormData(form),
      headers: {
        'Accept': 'application/json'
      }
    })
    if (res.ok) {
      alert('提交成功');
      // 提交成功后可以按需清空表单和localStorage
      // form.reset()
      // localStorage.removeItem('data')
    }
  } catch (err) {
    alert('提交失败，请重试');
    console.error(err);
  }
})

// 原有回填逻辑不变
const reloadBrowser = JSON.parse(localStorage.getItem('data'));
if (reloadBrowser) {
  formName.value = reloadBrowser.name;
  email.value = reloadBrowser.email;
  message.value = reloadBrowser.message;
}

跨浏览器同步数据方案 #

如果需要跨浏览器、跨设备获取表单数据，不能使用localStorage，需要：

• 增加用户账号体系，用户登录后将表单数据上传到你的后端服务存储
• 打开表单页面时，先请求后端接口拉取对应用户的表单数据再回填

内容的提问来源于stack exchange，提问作者Emmanuel Oga