Question

我是JS的新手，对我的朋友产生了疑问。编码

getInput.js

setVal(5,6);

global.js

var x ; var y ;
function setVal(a,b){
x=a;
y=b;
}
function getVal(){
  //code to return the value of x and y as an array 
}

getVal.js

arr = getVal();

1.html：

<html>
<head>
<script src='global.js'></script>
<script src='getInput.js'></script>
</head>
<body>
<!-- content of body -->
<!--Code to navigate to 2.html -->
</body>
</html>

2.html：

   <html>
    <head>
    <script src='global.js'></script>
    <script src='getVal.js'></script>
    </head>
    <body>
    <!-- content of body -->
    </body>
    </html>

当重定向2.html时，它将数组显示为“未定义”

我知道可以使用页面之间的缓存传递变量，并且还有其他各种方法可以执行相同操作。但我想知道一个具体的原因，为什么上述方法不起作用。如果有人让我知道更好的解决方案，那将是值得的。

Answer 1

因为在这种情况下移动到新页面2.html时，会破坏上一页并解析和加载新页面。因此，您的脚本global.js会在页面2.html上重新执行，当您调用函数getVal()时，这些变量为undefined，因为它们没有分配任何值。

HTTP是无状态的，它不能在不同请求之间保留信息。您需要某种机制来将这些值存储在cookie，本地存储或某种数据库中。

Answer 2

使用cookie在其他html页面中设置和获取数组的值，如下所示：

设置 Cookie：

document.cookie="x=John; y=Mike";

获取 Cookie值：

var arr = document.cookie;

然后您可以使用字符串标记生成器来标记 arr 。

- 或 -

使用本地存储，如下所示：

要设置项目：

localStorage.setItem('arr',JSON.stringify(arr));

获取项目：

arr = localStorage.getItem('arr');
arr = JSON.parse(arr);

Answer 3

每个浏览器都有两个存储对象。 1.本地存储。 2.会话存储。如果您的目的是仅为会话使用变量，请使用sessionStorage对象。根据您的要求，您可以像这样使用它。

sessionStorage.setItem("x", 5);
sessionStorage.setItem("y", 6);

您可以获得＆＃34; x＆＃34;的值和＆＃34; y＆＃34;

在会话中的任何页面中

var x = sessionStorage.getItem("x");
var y = sessionStorage.getItem("y");

本地存储也可以完成同样的工作。但它只是在会话结束后保持价值。有关会话和本地存储对象的更多信息，请参阅以下链接。希望它有所帮助。

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

将变量传递给JS中的另一个页面

3 个答案: