如何仅使用 HTML 和 JS 在 HTML 页面之间传递数组？答案

【问题标题】：How can i pass arrays between HTML pages by using ONLY HTML and JS?如何仅使用 HTML 和 JS 在 HTML 页面之间传递数组？
【发布时间】：2021-07-06 19:16:38
【问题描述】：

我在 test0.html 文件中有这个简单的代码，它将数据发送到 test1.html：

<body>
    <form action="test1.html">
        <input type="text" name="array[0]" placeholder="val1" id="">
        <input type="text" name="array[1]" placeholder="val2" id="">
        <input type="submit" value="send">
    </form>

</body>

然后我在 test1.html 上有这段代码，它应该将一些新数据发送回 test0：

<body>
<form action="test0.html">
    <input type="text" name="array[2]" placeholder="val3" id="">
    <input type="text" name="array[3]" placeholder="val4" id="">
    <input type="submit" value="send back">
</form>

当我将数据发送回 test0 时，我只是获得了在 test1.html 中键入的最新数据。我想知道如何跟踪以前从 test0 发送的那些。

谢谢！

【问题讨论】：

您可以使用localStorage 来跟踪数据
好吧，这更有意义...

标签： javascript html arrays forms

【解决方案1】：

您获取发送的数据并暂时存储它，然后您可以将其传递到以下页面。隐藏类型的输入字段适合这里。

<form action="test0.html">
  <input type="hidden" name="array[0]" value="SUBMITTED_DATA">
  <input type="hidden" name="array[1]" value="SUBMITTED_DATA">
  <input type="text" name="array[2]" placeholder="val3" id="">
  <input type="text" name="array[3]" placeholder="val4" id="">

   <input type="submit" value="send back">
</form>

使用这种方法，您无法确定数据是否随后被编辑！在这里，签名可以提供补救。

【讨论】：

【解决方案2】：

由于默认的表单方法是GET，表单参数将使用查询参数传递

因此，您可以在表单中为每个查询参数添加一个隐藏的输入字段。

<body>
  <form action="test0.html">
    <input type="text" name="array[2]" placeholder="val3">
    <input type="text" name="array[3]" placeholder="val4">
    <input type="submit" value="send back">
  </form>

  <script>
    (function() {
      var form = document.querySelector("form");
      var queryParams = new URLSearchParams(location.search);
    
      for (var key of params.keys()) {
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = queryParams.get(key);
        form.insertBefore(input, form.firstChild);
      }
    })();
  </script>
</body>

【讨论】：