如何在頁面重新加載時保持背景顏色變化？

我有一個包含單擊單元格的表格，將單元格的背景顏色更改爲綠色。但是，當我重新加載頁面時，背景色會恢復爲原來的顏色;白色。有什麼辦法可以阻止它恢復嗎？在點擊它後保持綠色？如何在頁面重新加載時保持背景顏色變化？

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

如何在頁面重新加載時保持背景顏色變化？

回答

相關問題