如何实现单表单通过localStorage向多个HTML页面传递数据

不需要为每个目标页面单独创建独立表单，修改提交跳转逻辑即可实现需求。

问题根源 #

当前代码给form标签写死了action="main2.html"，调用form.submit()时只会向这个固定地址提交跳转，自然无法分发到不同页面。
实际上你已经提前把输入内容存入了localStorage，同源部署的所有HTML页面都可以读取同一份localStorage数据，完全不需要依赖表单默认提交行为传值。

修改步骤 #

• 移除form标签上固定的method和action属性，给四个提交按钮的点击事件分别传入对应要跳转的目标页面地址
• 修改submitForm函数，接收目标页面参数，存完localStorage数据后直接通过页面跳转API跳到对应地址，不再调用form的默认submit方法

修改后的发送端HTML代码 #

<form id="form">
  <input
    class="name-input"
    type="text"
    placeholder="YOUR NAME"
    name="name"
    id="name"
  />
  <input
    class="button1"
    type="button"
    value="Submit"
    onclick="submitForm('main1.html')"
  />
  <input
    class="button2"
    type="button"
    value="Submit"
    onclick="submitForm('main2.html')"
  />
  <input
    class="button3"
    type="button"
    value="Submit"
    onclick="submitForm('main3.html')"
  />
  <input
    class="button4"
    type="button"
    value="Submit"
    onclick="submitForm('main4.html')"
  />
</form>

把代码里的main1~main4.html替换成你实际需要跳转的四个页面地址即可

修改后的发送端JS代码 #

function submitForm(targetPage) {
  const inputName = document.getElementById("name").value.trim();
  // 可选：输入为空时拦截提交
  if (!inputName) {
    alert("请先输入你的名字");
    return;
  }
  if (typeof localStorage != "undefined") {
    localStorage.name = inputName;
  }
  // 跳转到对应目标页面
  window.location.href = targetPage;
}

接收端说明 #

四个目标页面的现有代码不需要做任何修改，只要每个页面的body标签都保留onload="setData()"配置，页面加载时就会自动读取localStorage里存的名字并渲染到对应位置。

注意事项 #

该方案生效的前提是所有HTML页面部署在同一个域名（本地打开时需放在同一个文件夹路径下），满足同源策略要求即可正常共享localStorage数据。

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