首页 / JAVASCRIPT / 另一页上的JavaScript Session存储变量

另一页上的JavaScript Session存储变量

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了另一页上的JavaScript Session存储变量，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2055字，纯文字阅读大概需要3分钟。

内容图文

所以我对JavaScript很陌生,我希望得到一些帮助,让这些代码能够运行.我看了很多其他帖子谈论会话存储以及if / else语句,但仍然无法弄明白.

我有一个页面,我们称之为第1页,它有3个链接,“红色”,“绿色”和“蓝色”.

当您单击这些链接中的任何一个时,其功能会将会话存储变量“colorVar”设置为所选颜色,然后重定向到名为第2页的页面.

当页面2加载时,window.onload动作用于根据第1页上设置的变量启动一个函数.在这种情况下,从第2页开始的函数只显示“你的颜色是____！”.

下面是代码：

<!-- [This is Page 1] -->

<a href="Page2.html" onclick="colorRed()">Set color to red</a>
<a href="Page2.html" onclick="colorBlue()">Set color to blue</a>
<a href="Page2.html" onclick="colorGreen()">Set color to green</a>

<script>

function colorRed() {
      sessionStorage.setItem("colorVar", "red"); 
}
function colorBlue() {
     sessionStorage.setItem("colorVar", "blue");
}
function colorGreen() {
     sessionStorage.setItem("colorVar", "green"); 
}
</script>

<!-- [This is Page 2] -->

<script>
window.onload = sessionStorage.colorVar + 'Write()';

function redWrite() {
    document.write("Your color is red!")
}

function blueWrite() {
    document.write("Your color is blue!")
}

function greenWrite() {
   document.write("Your color is green!")
}
</script>

解决方法:

您可以在< a>的href处传递sessionStorage作为查询字符串.元件;在Page2.html的window.onload事件中使用location.search

Page1.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <a href="Page2.html" data-color="red" onclick="color(this)">Set color to red</a>
  <a href="Page2.html" data-color="blue" onclick="color(this)">Set color to blue</a>
  <a href="Page2.html" data-color="green" onclick="color(this)">Set color to green</a>

  <script>
    function color(elem) {
      event.preventDefault();
      sessionStorage.setItem("colorVar", elem.dataset.color);
      location.href = elem.href + "?colorVar=" + sessionStorage.getItem("colorVar");
    }
  </script>
</body>

</html>

在Page2.html

<script>
window.onload = function() {
  document.write("Your color is " + location.search.split("=").pop())
}
</script>

plnkr http://plnkr.co/edit/eNVXr4ElXRzrxlZ7EY0a?p=preview

内容总结

以上是互联网集市为您收集整理的另一页上的JavaScript Session存储变量全部内容，希望文章能够帮你解决另一页上的JavaScript Session存储变量所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/710489.html

来源：【匿名】