sessionStorage 无法正常工作

Question

这个问题看起来很简单，但我没有解决。

我有 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'));

这些功能将通过按钮更改 background 和 font 颜色。这就是我想要的完美效果，但是..问题是当我尝试刷新页面时，颜色变回我在 css.

中使用的默认颜色

这是 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>

问题是：
1. 为什么 sessionStorage 不工作
2. css transition对sessionStorage有影响吗？我为什么要问这个，因为在我使用 css transition 之前 sessionStorage 工作得很好。

谢谢..

Answer 1

我会使用一个函数来设置所有颜色，并将一个颜色变量传递给它。要启动颜色，您需要获取存储在 sessionStorage 中的颜色值，并在页面加载之前设置背景颜色。例如

// 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);

然后，将您的按钮函数调用更改为：

<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>

sessionStorage 无法正常工作

sessionStorage doesn't work correctly

html

javascript

css

session-storage