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

Question

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

通过按下按钮，我希望 javascript 将文本框的值保存在全局（？）变量中并跳转到第 2 页。使用 "window.onload" 我想要第二个 Javascript-提醒第 1 页保存的值的功能。

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

}

在 "page 1" 我有这个发送按钮：

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

它启动 Javascript 功能并将我正确重定向到我的第 2 页。

但是在第二页上：

window.onload=read_price();

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

我已经阅读了很多关于这些全局变量的内容。例如。在此页面上：Problem with global variable.. 但我无法让它工作...

为什么这不起作用？

Answer 1

这里最好的选择是使用查询字符串 'send' 值。

how to get query string value using javascript

所以第 1 页重定向到 page2.html?someValue=ABC
然后第2页可以读取查询字符串，特别是键 'someValue'

如果这不仅仅是一个学习练习，您可能需要考虑它的安全隐患。

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

Answer 2

您有几个不同的选择：

您可以使用像 SammyJS 这样的 SPA 路由器，或者 Angularjs 和 ui-路由器，这样您的页面就是有状态的。
使用 sessionStorage 来存储您的状态。
将值存储在 URL 散列中。

Answer 3

不阅读您的代码，只阅读您的场景，我会使用 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 4

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

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 i.e 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+" .";

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

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

Passing Variable through JavaScript from one html page to another page

html

javascript

variables

global

undefined