Question

我在传递js变量时遇到问题！我有两个html页面，每个html页面都有一个js脚本。我想要在第一个html中单击按钮时将变量传递到另一个js文件。

我的第一个html（index.html）是：

// test.js

var vari;
document.getElementById("btn").addEventListener("click", function() {
  vari = 10;
  window.location.href = "./index2.html";
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>test</p>
  <button id="btn">click</button>

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

</html>

此html的脚本为（test.js）：

我想在单击btn时转到html2（index2.html）并将vari传递给js2（test2.js）！

我的html2（index2.html）是：

// test.js
var vari;
document.getElementById("btn").addEventListener("click", function() {
  vari = 10;
  window.location.href = "./index2.html";
});

// test2.js
console.log(vari);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script src="./test.js"></script>
    <script src="./test2.js"></script>
</body>
</html>

但是在test2.js中，vari未定义。我该如何解决这个问题？

Answer 1

将变量保存在sessionStorage中。代替

vari = 10;

做

sessionStorage.vari = 10;

然后您可以在test2.js中检索它：

console.log(sessionStorage.vari);

请注意，存储将始终包含 string 。如果类型很重要，请确保转换回数字：

const vari = Number(sessionStorage.vari);

对于更通用的解决方案，要传输任何类型的可序列化数据，请在保存时使用JSON.stringify，在检索时使用JSON.parse。

在js中单击按钮时传递变量

1 个答案: