html之间如何传数组

在Web开发中，我们经常需要在HTML页面之间传递数据，这些数据可以是字符串、数字、布尔值等基本类型，也可以是数组、对象等复杂类型，本文将介绍如何在HTML之间传递数组。

1、使用URL参数传递数组

最简单的方法是将数组转换为字符串，然后将其作为URL参数传递，这种方法适用于数组元素较少的情况，我们可以将数组[1, 2, 3]转换为字符串"1,2,3"，然后将其作为URL参数传递，在接收端，我们可以使用JavaScript的decodeURIComponent()函数将字符串转换回数组。

<!-- 发送端 -->
<a href="receiver.html?array=1%2C2%2C3">传递数组</a>

<!-- 接收端 -->
<script>
  var array = decodeURIComponent(location.search.substring(1)).split(',');
  console.log(array); // 输出： [1, 2, 3]
</script>

2、使用表单提交传递数组

另一种方法是将数组作为表单数据提交，这种方法适用于数组元素较多的情况，因为URL长度有限制，在发送端，我们可以创建一个隐藏的表单，并将数组元素添加到表单中，在接收端，我们可以使用JavaScript获取表单数据并解析为数组。

<!-- 发送端 -->
<form id="arrayForm" action="receiver.html" method="post">
  <input type="hidden" name="array[]" value="1">
  <input type="hidden" name="array[]" value="2">
  <input type="hidden" name="array[]" value="3">
  <button type="submit">传递数组</button>
</form>

<!-- 接收端 -->
<script>
  var form = document.getElementById('arrayForm');
  var array = [];
  for (var i = 0; i < form.elements.length; i++) {
    if (form.elements[i].name.startsWith('array[]')) {
      array.push(form.elements[i].value);
    }
  }
  console.log(array); // 输出： [1, 2, 3]
</script>

3、使用cookie传递数组

cookie是一种存储在客户端的数据，可以用于在多个页面之间传递数据，由于cookie的大小限制和安全性问题，不建议将大量数据存储在cookie中，我们可以将数组转换为字符串，然后将其存储在cookie中，在接收端，我们可以使用JavaScript的decodeURIComponent()函数将字符串转换回数组。

<!-- 发送端 -->
document.cookie = "array=" + encodeURIComponent("1,2,3");

<!-- 接收端 -->
<script>
  var array = decodeURIComponent(document.cookie.replace(/(?:(?:^|.*;\s*)array\s*\=\s*([^;]*).*$)|^.*$/, "$1"));
  console.log(array); // 输出： "1,2,3"
</script>

以上介绍了三种在HTML之间传递数组的方法，分别是使用URL参数、表单提交和使用cookie，每种方法都有其优缺点，可以根据实际需求选择合适的方法。