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

IT技术 javascript html variables undefined global
2021-01-15 15:08:27

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

}

在“第 1 页”上，我有这个发送按钮：

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

它启动 Javascript 函数并将我正确重定向到我的 page2。

但是在第二页上：

window.onload=read_price();

我总是得到全局变量价格的“未定义”值。

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

为什么这不起作用？

5个回答

无需阅读您的代码而仅阅读您的场景，我将通过使用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 允许更多空间，并且当您请求页面时它们不会发送回服务器。

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

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

如何使用javascript获取查询字符串值

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

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

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

您有几个不同的选择：

  • 你可以使用像 SammyJS 这样的 SPA 路由器，或者 Angularjs 和 ui-router，所以你的页面是有状态的。
  • 使用 sessionStorage 来存储您的状态。
  • 将值存储在 URL 哈希上。
@LiamB 提出了一个很好的观点。我的建议以及他的建议都有安全隐患，用户可以在应用程序之外更改值：通过更改查询字符串参数、散列参数、localStorage 数据或通过其他方式。您应该始终对数据的后端服务进行验证。
2021-04-03 15:08:27
如何在简单的html中使用会话？
2021-04-08 15:08:27

有两个页面： 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>

希望能帮助到你！

我有一个简单的方法（纯 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+" .";

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

其它你可能感兴趣的问题
上一篇您是否需要在 onclick 中指定“javascript:”？ 下一篇是否可以在 HTML 中的“onclick”上运行 .exe 或 .bat 文件