如何在两个HTML页面之间交换变量？

Question

我有两个HTML页面， example1.html和example2.html 。

如何使用查询字符串将变量从example1.html传递到example2.html ，并在不使用任何服务器端代码的情况下在example2.html检索该变量？

Answer 1

在example1.html中：

<a href='example2.html?myVar1=42'>a link</a>
<a href='example2.html?myVar1=43'>another link</a>

或根据需要使用Javascript生成链接。 只要确保？varName = value以某种方式进入example2.html的末尾。

然后，在example2.html中，您使用Javascript来解析example2附带的查询字符串。

为此，您可以尝试使用Querystring。

// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");

或者，parent.document.URL包含您所在页面的完整URI。 你可以提取：

parent.document.URL.substring(parent.document.URL.indexOf('?'), parent.document.URL.length);

并手动解析它以将您编码的变量拉入URI。

编辑：忘记'新Querystring（）'的'新'部分。 糟糕！

Answer 2

HTML / HTTP是无状态的，这意味着，您在上一页上所做/所看到的内容与当前页面完全断开。问题是如何在前端的两个页面之间传递变量。 （由于HTTP是无状态的，每次加载页面时，它都将使用您在JavaScript中设置的任何内容的初始值。您无法在JS中设置全局变量，只需在再次加载页面后保持该值。

有几种方法可以将值存储在另一个地方，以便您可以使用JavaScript在加载时初始化它）

1） - 简单地使用前端存储，它配备任何浏览器（Cookie，会话存储，本地存储 - 出于安全原因在整个域中可用 - >这意味着您可以仅在一个域中保存此存储上的数据，另一个域可以' t访问此数据）并将值放在一个页面中并在其他页面中获取值。 考虑到：

Cookie将数据保存到您确定的时间，

会话存储保存数据，直到浏览器默认选项卡关闭。

本地存储保存数据，直到浏览器完全关闭并在选项卡（页面）之间共享数据它存储没有过期日期的数据，并且仅通过JavaScript清除，或清除浏览器缓存/本地存储的数据 - 与cookie过期不同。

2） - 通过Ajax渲染函数生成属性时添加属性

<a href='example2.html?action=getAll&element=product&id=1'>a link</a>
<a href='example2.html?action=getAll&element=product&id=2'>another link</a>

- >点击此元素后构建“URL /？ action = getAll＆element = product＆id = 1“并且在第二页中将执行操作，您可以解析此URL并使用适当的参数调用适当的Ajax。

Answer 3

您可以使用cookie和Querystring来交换值。