通过 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() {
   var getInput = prompt("Hey type something here: ");
   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

你有几个不同的选择：

• 您可以使用像 SammyJS 或 Angularjs 和 ui-router 这样的 SPA 路由器，因此您的页面是有状态的。
• 使用 sessionStorage 来存储你的状态。
• 将值存储在 URL 哈希上。

Answer 4

为此，我建议在链接数据中发送数据。 这是一种非常简单的方法，无需 PHP。 只需获取第二页中的链接并将上一个链接替换为“”。

Page_One.html：

<script>
    //Data to be transfered
    var data = "HelloWorld";

    //Redirect the user
    location.replace("http://example.com/Page_Two.html?" + data);
</script>

Page_Two.html：

<script>
//Get the current link
var link = window.location.href;

//Replace all content before ? with ""
link = link.replace("http://example.com/Page_Two.html?","");

//Display content
document.write("Page_One.html contains:" + link + "");
</script>

希望能帮助到你！

Answer 5

我有一个简单的方法（纯 JS）：第一页：

 <a href= "www.example.com/mypageTWO.html?gtk=SGVsbG8gV29ybGQh==">Goto Your Info</a>

注意：您必须在 Base64 中编码您的GTK值（即参数值）

接下来是第二页：

 <script> // first we get current URL (web page address in browser) var dloc= window.location.href; //then we split into chunks array var dsplt= dloc.split("?"); //then we again split into final chunk array, but only second element //of the first array ie dsplt[1] var sanitize= dsplt[1].split("="); // now here comes the tricky part, join all elements into single //string. IT may be the case, that base64 string contain '=' sign, we shall find it var dlen= sanitize.length; var FinString= ""; // we will start from 1, bcoz first element is GTK the key we don't // want it for(i=1;i<dlen;i++) { FinString= FinString+sanitize[i]; } // afterwards, all the Base64 value will be ONE value. // now we will convert this to Normal Text var cleantxt= window.atob(FinString); document.getElementById("yourname").innerHTML= "Your Name is : <b>"+cleantxt+" .";

您可以使用参数解码信息做任何事情......就像通过Javasript自动提交的“POST”方法表单将访问者立即重定向到另一个页面以最终引导一个php页面，没有可见的参数，但具有不可见的隐藏参数。