通过 JavaScript 将变量从一个 html 页面传递到另一个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27765666/
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
Passing Variable through JavaScript from one html page to another page
提问by Kronwied
I have two pages - "page 1" and "page 2". On page 1 there's an text-box with a value of e.g. 100 and a button at the end.
我有两页 - “第 1 页”和“第 2 页”。在第 1 页上有一个文本框，其值为 100，末尾有一个按钮。
By pressing the button I want javascript to save the value of the textbox in a global (?) variable and jump to page 2. With "window.onload" I want a second Javascript-function to alert the value saved at page1.
通过按下按钮，我希望 javascript 将文本框的值保存在全局 (?) 变量中并跳转到第 2 页。使用“window.onload”，我想要第二个 Javascript 函数来提醒保存在第 1 页的值。
Here's my Javascript code:
这是我的 Javascript 代码：
<script type="text/javascript">
var price; //declare outside the function = global variable ?
function save_price(){
alert("started_1"); //just for information
price = document.getElementById('the_id_of_the_textbox').value;
alert(price); //just for information
}
<script type="text/javascript">
function read_price(){
alert("started_2");
alert(price);
}
On "page 1" I have this send-Button with:
在“第 1 页”上，我有这个发送按钮：
<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/>
It starts the Javascript function and redirects me correctly to my page2.
它启动 Javascript 功能并将我正确重定向到我的 page2。
But with this ont the second page:
但是在第二页上：
window.onload=read_price();
I always get an "undefined" value of the global variable price.
我总是得到全局变量价格的“未定义”值。
I've read a lot about those global variables. E.g. at this page: Problem with global variable..But I can't get it working...
我已经阅读了很多关于这些全局变量的内容。例如在此页面：全局变量问题..但我无法让它工作......
Why is this not working?
为什么这不起作用？
回答by potasmic
Without reading your code but just your scenario, I would solve by using localStorage.
Here's an example, I'll use prompt()for short.
无需阅读您的代码而仅阅读您的场景，我将通过使用localStorage. 这是一个例子，我将使用prompt()简称。
On page1:
在第 1 页：
window.onload = function() {
var getInput = prompt("Hey type something here: ");
localStorage.setItem("storageName",getInput);
}
On page2:
在第 2 页：
window.onload = alert(localStorage.getItem("storageName"));
You can also use cookies but localStorage allows much more spaces, and they aren't sent back to servers when you request pages.
您也可以使用 cookie，但 localStorage 允许更多空间，并且在您请求页面时它们不会发送回服务器。
回答by LiamB
Your best option here, is to use the Query String to 'send' the value.
这里最好的选择是使用查询字符串来“发送”值。
how to get query string value using javascript
- So page 1 redirects to page2.html?someValue=ABC
- Page 2 can then read the query string and specifically the key 'someValue'
- 所以第 1 页重定向到 page2.html?someValue=ABC
- 然后第 2 页可以读取查询字符串，特别是键“someValue”
If this is anything more than a learning exercise you may want to consider the security implications of this though.
如果这不仅仅是一个学习练习，您可能需要考虑这样做的安全隐患。
Global variables wont help you here as once the page is re-loaded they are destroyed.
全局变量在这里不会帮助你，因为一旦页面重新加载它们就会被破坏。
回答by Martin
You have a few different options:
您有几个不同的选择：
- you can use a SPA router like SammyJS, or Angularjs and ui-router, so your pages are stateful.
- use sessionStorage to store your state.
- store the values on the URL hash.
- 你可以使用像 SammyJS 这样的 SPA 路由器，或者 Angularjs 和 ui-router，所以你的页面是有状态的。
- 使用 sessionStorage 来存储您的状态。
- 将值存储在 URL 哈希上。
回答by Kwilver Bear
There are two pages: Pageone.html :
有两个页面： Pageone.html ：
<script>
var hello = "hi"
location.replace("http://example.com/PageTwo.html?" + hi + "");
</script>
PageTwo.html :
PageTwo.html :
<script>
var link = window.location.href;
link = link.replace("http://example.com/PageTwo.html?","");
document.write("The variable contained this content:" + link + "");
</script>
Hope it helps!
希望能帮助到你！
