使用JavaScript在HTML页面之间传递变量
P粉757432491
2023-08-21 22:08:28
<p>我有两个页面 - "页面1"和"页面2"。在页面1上有一个文本框，值为例如100，以及一个按钮。</p>
<p>按下按钮后，我希望JavaScript将文本框的值保存在一个全局变量中，并跳转到页面2。使用"window.onload"，我希望第二个JavaScript函数在页面1上弹出保存的值。</p>
<p>这是我的JavaScript代码：</p>
<pre class="brush:php;toolbar:false;"><script type="text/javascript">
var price; //在函数外部声明 = 全局变量 ?
function save_price(){
alert("started_1"); //仅供参考
price = document.getElementById('the_id_of_the_textbox').value;
alert(price); //仅供参考
}</pre>
<pre class="brush:php;toolbar:false;"><script type="text/javascript">
function read_price(){
alert("started_2");
alert(price);
}</pre>
<p>在"页面1"上，我有一个发送按钮：</p>
<pre class="brush:php;toolbar:false;"><input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/></pre>
<p>它启动了JavaScript函数并正确地将我重定向到我的页面2。</p>
<p>但是在第二个页面上：</p>
<pre class="brush:php;toolbar:false;">window.onload=read_price();</pre>
<p>我总是得到全局变量price的"undefined"值。</p>
<p>我已经阅读了很多关于这些全局变量的资料。例如在这个页面：Problem with global variable.. 但是我无法让它正常工作...</p>
<p>为什么这不起作用？</p>
您在这里的最佳选择是使用查询字符串来“发送”值。
如何使用JavaScript获取查询字符串值
如果这不仅仅是一个学习练习，您可能需要考虑这样做的安全性问题。
全局变量在这里对您没有帮助，因为一旦页面重新加载，它们就会被销毁。
在没有阅读您的代码，只有您的场景的情况下，我会使用
localStorage来解决。 以下是一个示例，我将使用prompt()来简化。在页面1上：
window.onload = function() { var getInput = prompt("嘿，在这里输入一些内容："); localStorage.setItem("storageName",getInput); }在页面2上：
window.onload = alert(localStorage.getItem("storageName"));您也可以使用 cookies，但是 localStorage 允许更多的空间，并且在请求页面时不会将它们发送回服务器。