在js中单击按钮时传递变量[重复]答案

【问题标题】：pass variable when click button in js [duplicate]在js中单击按钮时传递变量[重复]
【发布时间】：2020-07-04 19:17:07
【问题描述】：

我在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 中，变量是未定义的。我该如何解决这个问题？

【问题讨论】：

如您所见，您收到错误消息。您需要测试元素 btn 是否存在 - 因为它不存在且未单击，所以未设置变量
可能重复：How do I share a global variable between multiple files?
@Dexygen 这怎么是骗子？ window.globalVar 将在位置更改时消失。OP 未使用节点或反应 btw

标签： javascript html

【解决方案1】：

将变量保存在 sessionStorage 中。而不是

vari = 10;

做

sessionStorage.vari = 10;

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

console.log(sessionStorage.vari);

注意存储总是包含一个字符串。如果类型很重要，请确保转换回数字：

const vari = Number(sessionStorage.vari);

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

【讨论】：

所以sessionStorage.setItem("vari",10)可以写成sessionStorage.vari = 10;？（我不是反对者）
是的，我更喜欢点符号，它更简洁
但是你用 Number(sessionStorage.vari) 而不是 +sessionStorage.vari :)
简洁常常被高估。例如，如果您使用接口的 setItem 和 getItem 方法，您可以轻松地 grep 代码以查找任何正在使用存储的地方。
@Dexygen grepping for *Storage 应该做同样的事情，不是吗？