所以我对 JavaScript 还比较陌生，我希望得到一些帮助让这段代码正常工作。我看过其他多篇讨论 session 存储以及 if/else 语句的帖子，但似乎仍然无法弄明白。
我有一个页面，我们称它为第 1 页，它有 3 个链接，“红色”、“绿色”和“蓝色”。
当您单击这些链接中的任何一个时，它的函数会将 session 存储变量“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>
最佳答案
你可以通过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>
关于另一个页面上的 JavaScript Session 存储变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38034647/