如何仅使用HTML和JS在HTML页面间传递数组并保留历史数据

原生表单提交时，只会携带当前表单DOM中存在的所有input字段的参数。你现在的两个页面表单是完全独立的：

• test0的表单仅声明了array[0]、array[1]两个输入项，提交到test1时，请求参数也只有这两个字段
• test1的表单仅声明了array[2]、array[3]两个输入项，根本没有承载test0传过来的前两个数组字段的位置，所以回传时自然会把所有历史数据全部丢掉

可落地的纯前端实现方案 #

不需要后端、不需要改原有表单的交互逻辑，核心做法是：每次页面加载时，把上一页传过来的历史数组参数，动态生成用户不可见的隐藏输入项注入到当前表单。这些隐藏项不干扰用户操作，提交时会自动把历史值一起带到目标页面，完整保留整个数组的所有历史值。

通用JS逻辑（两个页面共用） #

把下面这段代码直接复制到test0.html和test1.html的<script>标签里，不需要调整参数：

// 解析URL中携带的所有表单参数
function getPageParams() {
  const params = {};
  const search = window.location.search.slice(1);
  if (!search) return params;
  search.split('&').forEach(part => {
    const [key, value] = part.split('=');
    params[decodeURIComponent(key)] = decodeURIComponent(value || '');
  });
  return params;
}

// 把历史参数对应的隐藏输入项绑定到当前表单
function syncHistoryToForm() {
  const form = document.querySelector('form');
  const history = getPageParams();
  Object.entries(history).forEach(([name, val]) => {
    // 跳过当前页面已声明的输入项，避免重复提交
    if (form.querySelector(`[name="${name}"]`)) return;
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = val;
    form.appendChild(input);
  });
}

// DOM加载完成后自动执行同步
document.addEventListener('DOMContentLoaded', syncHistoryToForm);

原有代码的适配 #

完全保留你之前写的表单结构即可：

• test0.html保留array[0]、array[1]两个可见输入框，提交目标仍然是test1.html
• test1.html保留array[2]、array[3]两个可见输入框，提交目标仍然是test0.html

整个流程跑通后：

• 从test0跳转到test1时，JS会自动把test0提交的两个数组值作为隐藏input注入test1的表单
• 从test1提交回test0时，JS会自动把test1提交的两个新数组值作为隐藏input注入test0的表单
• 哪怕多次来回跳转，所有历史数组值都会自动跟着表单提交，不会出现数据丢失

注意事项：

• 如果数组条目较多、单条数据较长，建议把form的method属性改为post，规避GET方式的URL长度限制，JS逻辑不需要做任何修改
• 如果需要展示已提交的历史数组值，只需要把对应字段的input类型从hidden改为text，JS会自动把历史值回填到输入框中

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