如何在页面重新加载时保持背景颜色变化？

我有一个包含单击单元格的表格，将单元格的背景颜色更改为绿色。但是，当我重新加载页面时，背景色会恢复为原来的颜色;白色。有什么办法可以阻止它恢复吗？在点击它后保持绿色？如何在页面重新加载时保持背景颜色变化？

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>

*忽略<td>标签里面的内容。

来源

2016-08-13 cosmo

您可以拥有一个布尔isLoaded并将其存储在本地存储中。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage –

'localStorage'，'sessionStorage'和'document.cookie'是您在JavaScript中的选择。 'document.cookie'适用于所有浏览器。由于客户端（浏览器）的限制，如果使用'document.cookie'，我建议使用库。如果你使用HTML5的东西，你可以使用'localStorage'和'sessionStorage'。 – PHPglue

您必须将颜色值存储在客户端Cookie或服务器端会话。现代浏览器支持localStorage的也..

试试这个代码..

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

来源

2016-08-13 04:10:07 Goku

快18秒...你赢得这个皮卡丘！删除我的回答 – Dogoku

*现代浏览器也支持'localStorage'。*否，**所有**浏览器都支持'localStorage'（除非你生活在2009年）。 – 2016-08-13 07:44:49

由于@Yasin说

使用localstorage.take全局变量

一类一添加到所有的cells

设想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)); 


    }

来源

2016-08-13 04:28:59 saiyan

我试过一种方法来实现你提供的请求，sessionStorage应该是你最好的解决方案，cookie可以做到，但html5支持Web存储，这里是我的演示。

<html DOCTYPE> 
 
<head> 
 
<title>hello world</title> 
 
</head> 
 
<body> 
 
<style type="text/css"> 
 
#t1{ 
 
\t 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(){ 
 
\t var t = document.getElementById("t1"); 
 
\t window.addEventListener("load", function(){ 
 
\t \t var color = window.sessionStorage.getItem("tableColor"); 
 
\t \t if(color == 'undefined'){ 
 
\t \t \t t.style.backgroundColor = "aliceblue"; 
 
\t \t }else if(color == "green"){ 
 
\t \t \t t.style.backgroundColor = color; 
 
\t \t }else{ 
 
\t \t \t alert("another color you have chosen"); 
 
\t \t } 
 
\t }, false); 
 
})() 
 
function eight(){ 
 
\t var eight = document.getElementById("t1"); 
 
\t eight.style.backgroundColor = "green"; 
 
\t window.sessionStorage.setItem("tableColor", "green"); 
 
} 
 
</script> 
 
</html>

，它会确定你单击该表并重新加载后的PAGE电泳颜色会保持以前的状态，只有当你关闭浏览器，重新打开这个网页，表格的背景将改变为原始状态。

来源

2016-08-13 05:31:31 Crabime

如何在页面重新加载时保持背景颜色变化？

回答

相关问题