JavaScript会话存储变量在另一页上 [英] JavaScript Session storage variable on another page
问题描述
所以我对JavaScript很陌生，我希望得到这些代码的帮助。我已经看过多篇关于会话存储以及if / else语句的帖子，但仍然无法解决它。
我有一个页面，我们称之为第1页，它有3个链接，红色，绿色和蓝色。
当您点击其中任何一个链接时，它的功能会将会话存储变量'colorVar'设置为所选颜色，然后重定向到名为page 2的页面。
在页面2加载时，使用window.onload操作根据页面1上设置的变量启动一个函数。在这种情况下，从第2页开始的函数只显示你的颜色是____！。
继承人代码：
<！ - [这是第1页] - >
< a href =Page2.htmlonclick =colorRed（）>将颜色设置为红色< / a>
< a href =Page2.htmlonclick =colorGreen（）>将颜色设置为绿色< / a>
< script>
函数colorRed（）{
sessionStorage.setItem（colorVar，red）;
}
函数colorBlue（）{
sessionStorage.setItem（colorVar，blue）;
}
函数colorGreen（）{
sessionStorage.setItem（colorVar，green）;
}
< / script>
<！ - [这是第2页] - >
< script>
window.onload = sessionStorage.colorVar +'Write（）';
函数redWrite（）{
document.write（Your color is red！）
}
函数blueWrite（）{
document.write（Your color is blue！）
}
function greenWrite（）{
document.write（Your color is green！）
}
< / script>
您可以将 Page1.html 位于Page2.html rel =nofollow> http://plnkr.co/edit/eNVXr4ElXRzrxlZ7EY0a?p=preview So I'm rather new to JavaScript and I would love some help getting this code to work. I've looked at multiple other posts talking about session storage as well as if/else statements and still can't seem to figure it out. I have a page, lets call it page 1 and it has 3 links, "red" "green" and "blue". When you click on any of these links its function sets a session storage variable 'colorVar' to the color chosen and then redirects to a page called page 2. As page 2 loads, the window.onload action is used to start a function according to the variable set on page 1. In this case the function that starts on page 2 simply displays "Your color is ____!". Heres the code:
You can pass Page1.html at Page2.html plnkr http://plnkr.co/edit/eNVXr4ElXRzrxlZ7EY0a?p=preview 这篇关于JavaScript会话存储变量在另一页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ sessionStorage 作为 href location.search 在 window.onload 事件在 Page2.html
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheethref =style.css>
< script src =script.js>< / script>
< / head>
< body>
< a href =Page2.htmldata-color =blueonclick =color（this）>将颜色设置为蓝色< / a>
< a href =Page2.htmldata-color =greenonclick =color（this）>将颜色设置为绿色< / a>
< script>
函数color（elem）{
event.preventDefault（）;
sessionStorage.setItem（colorVar，elem.dataset.color）;
location.href = elem.href +？colorVar =+ sessionStorage.getItem（colorVar）;
}
< / script>
< / body>
< / html>
<脚本>
window.onload = function（）{
document.write（Your color is+ location.search.split（=）。pop（））
}
< /脚本> b
$ b <!-- [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 as as query string at href of <a> element; use location.search at window.onload event at Page2.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>
<script>
window.onload = function() {
document.write("Your color is " + location.search.split("=").pop())
}
</script>
