I have a table which contain cells that when clicked, will change the cell's background color to green. When I reload the page, however, the background color reverts back to its original color; white. Is there any way I can prevent it from reverting? To just keep it green after I clicked it?
JS:
function eight(){
var eight = document.getElementById("eight");
eight.style.backgroundColor = "green";
}
HTML:
<td id="eight" onclick="eight(); ">
<a>8</a>
<br>
<center>-</center>
<br>
<center>-</center>
<hr>
<center>-</center>
<br>
<center>-</center>
</td>
*Ignore the content inside the <td> tags.
I have a table which contain cells that when clicked, will change the cell's background color to green. When I reload the page, however, the background color reverts back to its original color; white. Is there any way I can prevent it from reverting? To just keep it green after I clicked it?
JS:
function eight(){
var eight = document.getElementById("eight");
eight.style.backgroundColor = "green";
}
HTML:
<td id="eight" onclick="eight(); ">
<a>8</a>
<br>
<center>-</center>
<br>
<center>-</center>
<hr>
<center>-</center>
<br>
<center>-</center>
</td>
*Ignore the content inside the <td> tags.
- 1 You can have a boolean isLoaded and store it in local storage. developer.mozilla/en-US/docs/Web/API/Window/localStorage – Yasin Yaqoobi Commented Aug 13, 2016 at 3:51
-
localStorage,sessionStorageanddocument.cookieare your choices in JavaScript.document.cookieworks on all Browsers. I remend using a Library if usingdocument.cookie, due to Client Side (Browser) limitations. If you are using HTML5 stuff you're fine withlocalStorageandsessionStorage. – StackSlave Commented Aug 13, 2016 at 4:23
3 Answers
Reset to default 5You have to store the color value in Client side Cookie or Server Side Session. Modern browsers supports localStorage also..
Try this Code..
function changeBackground() {
if (sessionStorage.getItem('colour')) {
document.body.style.backgroundColor = sessionStorage.getItem('colour');
}else{
document.body.style.backgroundColor = "#BB0A21";
sessionStorage.setItem('colour', "#BB0A21");
}
}
// then you'll need to call your function on page load
changeBackground();
As @Yasin says
use localstorage.take global variable
first add a class to all the cells
suppose color.then
var cells=document.getElementsByClassname('color');
var colours=[];
if(localstorage.getItem('colours'))
{
colours = JSON.parse(localstorage.getItem('colours')); // if alreay there
for(i=0;i<cells.length;i++)
{
for(j=0;j<colours.length;j++)
{
if(cells[i].getAttribute('id')==colours[j].id)
{
cells[i].style.backgroundColor = colours[j].colour;
}
}
}
}
function eight(){
var eight = document.getElementById("eight");
eight.style.backgroundColor = "green";
colours.push({id:'eight',colour:'green'});
localstorage.setItem('colours',JSON.stringify(colours));
}
I have tried a way to achieve the request you provided,sessionStorage should be the best solution for you,cookie can do it anyway,but html5 supports Web Storage,here are my demo about that.
<html DOCTYPE>
<head>
<title>hello world</title>
</head>
<body>
<style type="text/css">
#t1{
background-color: aliceblue;
}
</style>
<table id="t1" onclick="eight();">
<tr>
<td>hello world</td>
</tr>
<tr><td>hello world</td></tr>
<tr><td>hello world</td></tr>
</table>
</body>
<script type="text/javascript">
(function(){
var t = document.getElementById("t1");
window.addEventListener("load", function(){
var color = window.sessionStorage.getItem("tableColor");
if(color == 'undefined'){
t.style.backgroundColor = "aliceblue";
}else if(color == "green"){
t.style.backgroundColor = color;
}else{
alert("another color you have chosen");
}
}, false);
})()
function eight(){
var eight = document.getElementById("t1");
eight.style.backgroundColor = "green";
window.sessionStorage.setItem("tableColor", "green");
}
</script>
</html>and it will ok after you click the table and reload the page.the color will remain the previous status and only if you close your browser and reopen this page again, the table background will change to the origin status.