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

【问题标题】：Passing Variable through JavaScript from one html page to another page通过 JavaScript 将变量从一个 html 页面传递到另一个页面
【发布时间】：2015-01-04 12:49:11
【问题描述】：

我有两页 - “第 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();

我总是得到一个全局变量 price 的“未定义”值。

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

为什么这不起作用？

【问题讨论】：

您误解了浏览器中 JavaScript 中的“全局变量”是什么。它们仍然与设置它们的页面相关联，它们不存在于其他页面中。
全局变量只对页面是全局的。也许看看url参数stackoverflow.com/questions/979975/…？
@CBroe（和 nha）谢谢！不知道他们仍然被绑在页面上。我认为它们是“真正的”全球性的（适用于所有网页）
Persist variables between page loads的可能重复

标签： javascript html variables undefined global

【解决方案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 允许更多空间，并且在您请求页面时不会将它们发送回服务器。

【讨论】：

这是一个很好的解决方案，但是您还没有解释为什么要使用它。 OP 不理解 JS 中的全局变量。
@potasmic 谢谢。一个非常棒且简单的解决方案。 :) 我是否必须考虑（如 LiamB 所说）此解决方案的一些基本安全性？
@ColBeseder ，Krownied：localStorage 是每个域的。除非您包含来自其他来源（例如 Google Analytics）的其他脚本，否则其他站点无法访问您的 localStorage。关闭选项卡时 sessionStorage 过期。 Cookie 的过期时间比 localStorage 短。但是，如果数据包含敏感信息，您应该投资后端交换方案，而不是直接存储到浏览器中，用户可以查看、编辑等（就像 cookie）
在我的 page2 中它说 localstorage 没有定义
而我它根本不存储它...在第 2 页上localStorage.getItem("key") 的结果是null

【解决方案2】：

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

how to get query string value using javascript

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

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

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

【讨论】：

【解决方案3】：

您有几个不同的选择：

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

【讨论】：

@LiamB 提出了一个很好的观点。我的建议和他的建议都具有安全含义，用户可以在应用程序之外更改值：通过更改查询字符串参数、哈希参数、localStorage 数据或通过其他方式。您应该始终对数据的后端服务进行验证。
如何在简单的html中使用session？

【解决方案4】：

有两个页面： Pageone.html：

<script>
var hello = "hi"
location.replace("http://example.com/PageTwo.html?" + hi + "");
</script>

PageTwo.html：

<script>
var link = window.location.href;
link = link.replace("http://example.com/PageTwo.html?","");
document.write("The variable contained this content:" + link + "");
</script>

希望对你有帮助！

【讨论】：

【解决方案5】：

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

&lt;a href= "www.example.com/mypageTWO.html?gtk=SGVsbG8gV29ybGQh=="&gt;Goto Your Info&lt;/a&gt;

注意：您必须在 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 页面，没有可见参数，但有不可见的隐藏参数。

【讨论】：