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。

编辑：忘记'new Querystring（）'的'new'部分。糟糕...

Answer 2

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

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

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

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>

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

Answer 3

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

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

3 个答案: