Question

所以我对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>

Answer 1

您可以在sessionStorage元素的href处传递<a>和查询字符串;在location.search

的window.onload活动中使用Page2.html

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

Answer 2

修改：显然 answer above 比我提供的要好得多。我将此留在这里供未来的观众使用 - 也许是我用某种方式帮助某人的方式。

泰勒，

两件事。

sessionStorage()对每个页面/标签都是唯一的。 From the docs＆＃34; 在新标签页或新窗口中打开页面会导致新会话启动＆＃34;
window.onload是expecting a function。你只是连接一个字符串。

如果您发现将信息从一个页面传递到另一个页面的不同方式（您可以将其填入URL中），您的新颜色函数应如下所示：

<script>
window.onload = writeColor(sessionStorage.colorVar);

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

Answer 3

您不能将window.onload设置为字符串;你必须直接指向一个函数。

我建议根据if的值创建一个包含sessionStorage.colorVar语句的新函数（称之为writeColor）;然后你可以做window.onload=writeColor;

或者，将window.onload行更改为window.onload = window[sessionStorage.colorVar + 'Write'];，它将从全局范围中获取您的函数并将其分配给window.onload。

另一页上的JavaScript会话存储变量

3 个答案: