如何在两个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.