Javascript 如何在两个 HTML 页面之间交换变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3724106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to exchange variables between two HTML pages?
提问by mahesh
I have two HTML pages, example1.htmland example2.html.
我有两个 HTML 页面，example1.html以及example2.html.
How do I pass variables from example1.htmlto example2.htmlusing the query string, and retrieve that variable in example2.htmlwithout using any serverside code?
如何使用查询字符串将变量从 传递example1.html到example2.html，并在example2.html不使用任何服务器端代码的情况下检索该变量？
回答by cubic1271
In example1.html:
在example1.html中：
<a href='example2.html?myVar1=42'>a link</a>
<a href='example2.html?myVar1=43'>another link</a>
or generate the links with Javascript as desired. Just make sure the ?varName=value gets onto the end of example2.html somehow.
或根据需要使用 Javascript 生成链接。只要确保 ?varName=value 以某种方式进入 example2.html 的末尾。
Then, in example2.html, you use Javascript to parse the query string that example2 came with.
然后，在example2.html 中，您使用Javascript 来解析example2 附带的查询字符串。
To do this, you could try Querystring.
为此，您可以尝试使用 Querystring。
// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");
Alternatively, parent.document.URL contains the complete URI for the page you're on. You could extract that:
或者， parent.document.URL 包含您所在页面的完整 URI。你可以提取：
parent.document.URL.substring(parent.document.URL.indexOf('?'), parent.document.URL.length);
and parse it manually to pull the variables you encoded into the URI.
并手动解析它以将您编码的变量提取到 URI 中。
EDIT: Forgot the 'new' part of 'new Querystring()'. Oops...
编辑：忘记了“new Querystring()”的“new”部分。哎呀...
回答by Musa
HTML / HTTP is stateless, this means that, what you did / saw on the previous page, is completely disconnected with the current page.Question is How to pass variable between two pages in front end. (As HTTP is stateless, every time you load the page it will use the initial values of whatever you set in JavaScript. You can't set a global variable in JS and simply make that value stay after loading the page again.
HTML/HTTP 是无状态的，这意味着，你在上一页所做的/看到的，与当前页面是完全断开的。问题是如何在前端的两个页面之间传递变量。（由于 HTTP 是无状态的，每次加载页面时，它都会使用您在 JavaScript 中设置的任何初始值。您不能在 JS 中设置全局变量，并在再次加载页面后简单地保留该值。
There are a couple of ways you could store the value in another place so that you can initialize it on load using JavaScript)
有几种方法可以将值存储在另一个位置，以便您可以在加载时使用 JavaScript 对其进行初始化）
1) - Simple using Front End Storages, which equips any Browser (Cookie, Session Storage, Local Storage - which for security reasons available throughout one domain -> it means you can save data on this storage only for one domain, another domain can't access this data ) and put value in one page and get value in others. Considering that:
1) - 简单地使用前端存储，它配备任何浏览器（Cookie、会话存储、本地存储 - 出于安全原因可在整个域中使用 -> 这意味着您只能为一个域保存此存储上的数据，另一个域可以” t 访问此数据）并将价值放在一页中并在其他页面中获取价值。考虑到：
Cookie saves data until what time you have determined,
Session Storage saves data until the browser default tab closed.
Local Storage saves data until Browser completely closed and shares data between tabs (pages) It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.
Cookie 将数据保存到您确定的时间，
会话存储会保存数据，直到浏览器默认选项卡关闭。
本地存储保存数据直到浏览器完全关闭并在选项卡（页面）之间共享数据它存储的数据没有过期日期，并且只能通过 JavaScript 清除，或清除浏览器缓存/本地存储的数据 - 与 cookie 过期不同。
2) – Add attributes to the element when it generated via Ajax render function
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>
-> and after click this element construct “ URL / ? action=getAll & element=product & id=1 “ and in second page which will be gone action you can parse this URL and call appropriate Ajax with appropriate parameters.
-> 单击此元素后构造“ URL / ? action=getAll & element=product & id=1 “在第二个页面中，你可以解析这个 URL 并使用适当的参数调用适当的 Ajax。
回答by Pranay Rana
You can make use of cookies and Querystring to exchange values.
您可以使用 cookie 和 Querystring 来交换值。
