2

我在 angus.js 中共享了这样的 js 代码

var g_colour;

function getcolour() {
  return g_colour;
}

function setcolour(colour) {
  g_colour = colour;
}

html页面1和2可以这样访问：

1.html：

<html>
<head>
<title>Global javascript example</title>
</head>
<body>
<a href="2.html">Page2</a>
<script src="angus.js"></script>
<form name="frm">
<input type="button" value="Setblue" onclick="setcolour('blue');" />
<input type="button" value="Setyellow" onclick="setcolour('yellow');" />
<input type="button" value="getcolour" onclick="alert(getcolour());" />
</form>
</body>
</html>

2.html：

<html>
<head>
<title>Global javascript example page 2</title>
</head>
<body>
<a href="1.html">Page1</a>
<script src="angus.js"></script>
<form name="frm">
<input type="button" value="Setblue" onclick="setcolour('blue');" />
<input type="button" value="Setyellow" onclick="setcolour('yellow');" />
<input type="button" value="getcolour" onclick="alert(getcolour());" />
</form>
</body>
</html>

如果我在一页中设置一种颜色并导航到第 2 页，然后访问该颜色，它将返回未定义。即，我似乎在加载新的 html 页面时创建了一个新的 g_colour 实例。

我希望能够访问一种可以在第 1 页中设置并在第 2 页中访问的顶级变量。如何在 Javascript 中做到这一点？

4

4 回答 4

11

JS 变量从来没有持久化过，但是有两种方法可以解决这个问题：

  1. 饼干
  2. 贮存

除了最古老的浏览器之外，所有浏览器都支持 Cookie，但它们可能非常笨拙且难以使用。最重要的是，您的浏览器会在每次页面加载时向服务器发送 cookie，因此如果它仅由 JavaScript 使用，那么它的效率非常低。

相反，您可能应该查看存储选项。

保存项目就像localStorage.itemname = value;阅读一样简单localStorage.itemname，删除就像文字一样简单delete localStorage.itemname

这些值会跨页面加载保存，但不会发送到服务器。

于 2013-01-03T12:56:06.200 回答
4

使用本地存储：

localStorage.setItem('name', 'value');
var something = localStorage.getItem('name');

setItem在您的第一页上，然后getItem在您的第二页上。

与“普通” JavaScript 变量相反，localStorage 在页面加载中持续存在。

“正常”变量在 JS 文件加载（并运行）后立即初始化，但在文件卸载时被销毁，因此当用户离开页面时。

您也可以使用 Cookie，但在 JS 中使用它们有点麻烦，因为它们存储在如下字符串中：

'name=value; name1=value1; name2=value2';
于 2013-01-03T12:55:43.923 回答
2

每个页面请求都会请求脚本并执行它的副本，即使请求由于缓存而在客户端停止，当前页面仍然从头开始执行它。他们使用相同的代码，是的，但实例不同（即，您在两个不同的上下文中拥有该变量的两个副本）。

于 2013-01-03T12:56:39.750 回答
0

问题是您的页面 1 正在加载 JavaScript 文件，而您的页面 2 正在再次加载它，因此当页面 2 加载时，您在该 JS 文件的变量中设置的任何内容都将丢失，因为页面 2 将再次初始化 JS 文件。如果您愿意，您可以使用 cookie 来存储值，或者如果您将第 1 页和第 2 页组合起来很简单，但将它们放在不同的 div 中并根据您的逻辑显示/隐藏 div。

于 2013-01-03T13:01:54.723 回答