sessionStorage가 올바르게 작동하지 않습니다.

Question

이 문제는 아직 쉽게 풀리지 않습니다. 이러한 기능 버튼으로 backgroundfont 및 색상을 변경한다

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

:

난 하나 개의 세션에 대한 데이터를 저장하는 방법이 추천 자바 스크립트 코드를 갖는다. 그리고 그게 내가 원하는 것을 완벽하게 작동하지만 .. 문제는 내가 페이지를 새로 고치려고 할 때, 색이 기본 색으로 되돌아갔습니다. 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> 

질문은 다음과 같습니다
2.이 css transition이 sessionStorage에 영향을받지 않습니다
1. 왜 작동하지 sessionStorage? 내가 전에 묻기를 원하는 이유는, 전에 css transitionsessionStorage을 사용하고 있기 때문입니다.

감사합니다 ..

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>