javascript中的全局变量（从一个文件声明它，从另一个文件中放入值并从另一个文件访问它）

Question

我在 global.js 文件中声明了javascript全局变量，例如：

var glbValue;

并从 first.html 中输入全局变量glbValue的值，例如：

<script type="text/javascript" src="global.js"></script>
<script type="text/javascript">
function onBtnSubmit()
{
   glbValue=123;
}
</script>

并从 second.html 访问全局变量glbValue，例如：

<script type="text/javascript" src="global.js"></script>
<script type="text/javascript">
function onBtnClick()
{
   alert(glbValue);
}
</script>

它让我输出未定义取代123，为什么？

Answer 1

尝试使用本地存储：

first.html ：

localStorage.setItem("glbValue", "123");

second.html ：

alert(localStorage.getItem("glbValue"));

Answer 2

加载页面时，其所有脚本文件都在新上下文中执行。浏览器不会“记住”您在最后一页中所做的事情。如果您想在页面之间共享变量，您可以使用Cookie，或者更好的是localStorage或sessionStorage。

1. 如果您希望即使关闭浏览器也要保留该值，请使用localStorage。
2. 如果您希望仅在当前会话期间保留该值，请使用sessionStorage。

我认为2º解决方案在您的情况下是最好的：

<强> first.html ：

<script type="text/javascript">
function onBtnSubmit()
{
   sessionStorage.setItem('gblValue', 123);
}
</script>

<强> second.html

<script type="text/javascript">
function onBtnClick()
{
   alert(sessionStorage.getItem('gblValue'));
}
</script>

您不再需要该全局变量。 这个解决方案的唯一问题是IE8及以下版本不支持这一点，但有很好的polyfill透明地使用cookie。