Question

当前，我有以下按钮：

<button class="button" type="button" onClick="javascript:window.location.href='test2.html'">Home</button>

它是一个简单的重定向。我的页面有一个函数 getValues（）， getValues2（），这两个函数都返回一个数组。

a）我希望我的主页按钮重定向到给定的页面，并传递 getValues（）， getValues2（）中的值

b）我也想在重定向页面中使用此传递的值，那么我将如何访问它？在我要遍历两个数组并将它们显示在html页面上的意义上使用它。

非常感谢您的帮助。

Answer 1

希望我能正确理解您的问题。要保留数据，可以使用SessionStorage。它只能保留JSON值，并且在用户关闭浏览器窗口后将被清空。如果您不喜欢这种行为，则可以使用LocalStorage，它可以跨会话保存数据。

这是JS：

function onRedirect() {
  sessionStorage.setItem("values", JSON.stringify(getValues()));
  sessionStorage.setItem("values2", JSON.stringify(getValues2()));
}

function getValues() {
  return [1, 2, 3];
}

function getValues2() {
  return ["hello", "world"];
}

function renderList(arr) {
  return arr.map(item => `<li>${item}</li>`).join("");
}

document.querySelector("button").addEventListener("click", onRedirect);

if (window.location.pathname === "/test2.html") {
  const values = JSON.parse(sessionStorage.getItem("values"));
  const values2 = JSON.parse(sessionStorage.getItem("values2"));

  document.querySelector(".values").innerHTML = renderList(values);
  document.querySelector(".values2").innerHTML = renderList(values2);
}

这是HTML：

<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
  <button class="button" type="button" onClick="javascript:window.location.href='test2.html'">
    Home
  </button>

  <ul class="values">
  </ul>

  <ul class="values2">
  </ul>

    <script src="src/index.js"></script>
</body>

</html>

Codesandbox： https://codesandbox.io/s/km2o2xv3pr

通过单击按钮重定向发送阵列

1 个答案: