使用JavaScript在HTML页面之间传递变量

Question

我有两个页面 - "页面1"和"页面2"。在页面1上有一个文本框，值为例如100，以及一个按钮。

按下按钮后，我希望JavaScript将文本框的值保存在一个全局变量中，并跳转到页面2。使用"window.onload"，我希望第二个JavaScript函数在页面1上弹出保存的值。

这是我的JavaScript代码：

<script type="text/javascript">

var price; //在函数外部声明 = 全局变量 ?

function save_price(){

    alert("started_1"); //仅供参考

    price = document.getElementById('the_id_of_the_textbox').value; 

    alert(price); //仅供参考         
}

<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函数并正确地将我重定向到我的页面2。

但是在第二个页面上：

window.onload=read_price();

我总是得到全局变量price的"undefined"值。

我已经阅读了很多关于这些全局变量的资料。例如在这个页面：Problem with global variable.. 但是我无法让它正常工作...

为什么这不起作用？

Answer 1

您在这里的最佳选择是使用查询字符串来“发送”值。

如何使用JavaScript获取查询字符串值

• 所以页面1重定向到page2.html?someValue=ABC
• 页面2可以读取查询字符串，特别是键“someValue”

如果这不仅仅是一个学习练习，您可能需要考虑这样做的安全性问题。

全局变量在这里对您没有帮助，因为一旦页面重新加载，它们就会被销毁。

Answer 2

在没有阅读您的代码，只有您的场景的情况下，我会使用 localStorage 来解决。 以下是一个示例，我将使用 prompt() 来简化。

在页面1上：

window.onload = function() {
   var getInput = prompt("嘿，在这里输入一些内容：");
   localStorage.setItem("storageName",getInput);
}

在页面2上：

window.onload = alert(localStorage.getItem("storageName"));

您也可以使用 cookies，但是 localStorage 允许更多的空间，并且在请求页面时不会将它们发送回服务器。