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

Question

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

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

- mahesh

---

可能是重复的问题，如何从一个页面传递JavaScript对象到另一个页面。链接：https://dev59.com/jGsz5IYBdhLWcg3wuKMm - jherax

可能是如何在不同页面间保留JavaScript变量？的重复问题。 - jherax

可能是全局变量在页面重新加载时的使用的重复问题。 - jherax

可能是如何在JavaScript中从一个文件发送变量到另一个文件？的重复问题。 - jherax

可能是在页面之间传递JavaScript变量的重复问题。 - jherax

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'部分。糟糕...

- cubic1271

---

谢谢您的回复，我尝试了您建议的第二种方法，它运行良好。我已经写了像这样的代码：var a=parent.document.URL.substring(parent.document.URL.indexOf('myVar1='), parent.document.URL.length); alert(a); - mahesh

但问题是我只想将42存储到变量a中，当我写alert(a)时，它显示myVar1 = 42，但我如何只显示42。 - mahesh

从快速浏览（我也是一个初学者试图弄清楚这个问题），示例代码中索引为0的位置就在“？”之前。将找到的索引保存到一个变量中。设置一个字符串变量来存储该变量的名称，以便您可以测量其长度属性。然后，在调用您的案例值时，它将是var myString = "?myVar1 ="; 然后警报（a + myString.Length）;向右移动所需的字符数。 - DavidG

Answer 2

HTML / HTTP是无状态的，这意味着你在之前页面所做/看到的内容与当前页面完全没有关联。问题是如何在前端页面之间传递变量。(由于HTTP是无状态的，每次加载页面时，它将使用JavaScript中设置的初始值。你不能在JS中设置全局变量并简单地使该值在重新加载页面后保持不变。)

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

1) - 简单使用前端存储，在任何浏览器上都可以使用(包括Cookie、会话存储、本地存储-出于安全原因，本地存储只在一个域内可用-这意味着你只能在此存储器上保存数据，其他域不能访问这些数据)，在一个页面中放置值，在其他页面中获取值。 考虑到：

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”的链接，在第二个页面中，您可以解析此链接并使用适当的参数调用相应的Ajax。

- Musa

---

这是最好的答案。 - Xin

Answer 3

你可以使用Cookie和查询字符串来交换值。

- Pranay Rana