通过JavaScript将变量从一个html页面传递到另一页面

Question

我有两个页面-“页面1”和“页面2”。在第1页上，有一个文本框，其值例如为100，最后是一个按钮。

通过按下按钮，我希望javascript将文本框的值保存在全局（？）变量中，然后跳转到第2页。使用“ window.onload”，我想要第二个Javascript函数来提醒保存在page1的值。

这是我的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);

}

在“页面1”上，我具有以下发送按钮：

<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/>

它启动Javascript函数并将我正确地重定向到我的page2。

但是在第二页上：

window.onload=read_price(); 

我总是得到全局可变价格的“未定义”值。

我已经阅读了很多有关这些全局变量的内容。例如在此页面上：全局变量有问题..但是我无法使其正常工作...

为什么这不起作用？

Answer 1

在不阅读您的代码而仅阅读您的方案的情况下，我将使用解决localStorage。这是一个示例，我将prompt()简短地使用。在第1页：window.onload = function() {&nbsp; &nbsp;var getInput = prompt("Hey type something here: ");&nbsp; &nbsp;localStorage.setItem("storageName",getInput);}在第2页：window.onload = alert(localStorage.getItem("storageName"));您还可以使用cookie，但是localStorage允许更多空间，并且在您请求页面时不会将它们发送回服务器。

Answer 2

您最好的选择是使用查询字符串“发送”值。如何使用javascript获取查询字符串值所以页面1重定向到page2.html？someValue = ABC然后，第2页可以读取查询字符串，尤其是键“ someValue”如果这不仅仅是学习练习，那么您可能需要考虑这样做的安全性。全局变量不会在这里为您提供帮助，因为重新加载页面后，它们会被销毁。

Answer 3

您有几种选择：您可以使用SPA路由器，例如SammyJS或Angularjs和ui-router，因此您的页面是有状态的。使用sessionStorage来存储您的状态。将值存储在URL哈希上。