[英]sessionStorage doesn't work correctly
this problem look easy yet unsolved by me. 这个问题看起来很简单,但我却无法解决。
i have javascript code like this to stores data for one session : 我有这样的JavaScript代码来存储一个会话的数据:
function colorRed() {
document.getElementById("dashboard").style.backgroundColor = "#D64541";
document.getElementById("picked").style.backgroundColor = "#D64541";
document.getElementById("logout").style.color = "#D64541";
sessionStorage.setItem('colRed', "#D64541");
}
colorRed(sessionStorage.getItem('colRed'));
function colorGreen() {
document.getElementById("dashboard").style.backgroundColor = "#2ECC71";
document.getElementById("picked").style.backgroundColor = "#2ECC71";
document.getElementById("logout").style.color = "#2ECC71";
sessionStorage.setItem('colGreen', "#2ECC71");
}
colorGreen(sessionStorage.getItem('colGreen'));
function colorBlue() {
document.getElementById("dashboard").style.backgroundColor = "#6BB9F0";
document.getElementById("picked").style.backgroundColor = "#6BB9F0";
document.getElementById("logout").style.color = "#6BB9F0";
sessionStorage.setItem('colBlue', "#6BB9F0");
}
colorBlue(sessionStorage.getItem('colBlue'));
Those function will change the background
and font
color by button. 这些功能将通过按钮更改
background
和font
颜色。 And thats work perfectly what i want, but.. The problem is when i try to refresh the page, the color change back to default color i use in css
. 多数民众赞成在完美的是我想要的,但是..问题是当我尝试刷新页面时,颜色更改回我在
css
使用的默认颜色。
This is the html
code : 这是
html
代码:
<div id="dashboard" class="dashboard">
<img src="assets/img/svg/029-crown.svg" class="rank"/>
<h2><?php echo $userRow['username']; ?></h2>
<a id="logout" href="logout" class="logout">Logout</a>
<div id="picked" class="color">
<div id="choose" class="color-container">
<div id="red" onclick="colorRed()" class="red color-pick"></div>
<div id="green" onclick="colorGreen()" class="green color-pick"></div>
<div id="blue" onclick="colorBlue()" class="blue color-pick"></div>
</div>
</div>
</div>
Question is : 问题是:
1. Why sessionStorage
not working 1.为什么
sessionStorage
不起作用
2. Does css transition
affected to sessionStorage
? 2.
css transition
是否影响到sessionStorage
? Why am i asking this, because before i'm using css transition
the sessionStorage
work perfectly. 我为什么要问这个问题,因为在使用
css transition
, sessionStorage
可以完美地工作。
Thanks.. 谢谢..
I would use one function to set all colors, and pass a color variable to it. 我将使用一个函数来设置所有颜色,并将颜色变量传递给它。 To initiate a color, you need to get the color value you stored in the sessionStorage and set the background color before the page loads.
要启动颜色,需要获取存储在sessionStorage中的颜色值,并在页面加载之前设置背景颜色。 Eg
例如
// Generic function to set background color
function setColor(color) {
document.getElementById("dashboard").style.backgroundColor = color;
document.getElementById("picked").style.backgroundColor = color;
document.getElementById("logout").style.color = color;
sessionStorage.setItem('bgColor', color);
}
// Set color to initial color if it exists
var storedColor = sessionStorage.getItem('bgColor');
if (storedColor != undefined) setColor(storedColor);
And then, change your button function calls to something like: 然后,将您的按钮函数调用更改为:
<div id="red" onclick="setColor('#D64541')" class="red color-pick"></div>
<div id="green" onclick="setColor('#2ECC71')" class="green color-pick"></div>
<div id="blue" onclick="setColor('#6BB9F0')" class="blue color-pick"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.