使用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上:
在页面2上:
您也可以使用 cookies,但是 localStorage 允许更多的空间,并且在请求页面时不会将它们发送回服务器。