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

Question

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

6

我有一个表格，其中包含一些单元格。当单击这些单元格时，它们的背景颜色将更改为绿色。但是，当我重新加载页面时，背景颜色会恢复到其原始颜色；白色。有没有办法防��它恢复？让它在我单击后保持绿色？

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>标签内的内容。

抱歉，如果您需要更具体的翻译，请提供更详细的要求。

- cosmo

1

你可以拥有一个布尔值isLoaded并将其存储在本地存储中。https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage - Yasin Yaqoobi

localStorage、sessionStorage和document.cookie是JavaScript中的选择。document.cookie适用于所有浏览器。如果使用document.cookie，由于客户端（浏览器）的限制，建议使用库。如果您正在使用HTML5，则可以使用localStorage和sessionStorage。 - StackSlave

3个回答

1

我已经尝试了一种实现您提供的请求的方法，使用sessionStorage应该是最好的解决方案，cookie也可以实现，但是HTML5支持Web Storage，这是我的演示。

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

当您点击表格并重新加载页面后，它就会正常工作。颜色将保持先前的状态，只有在您关闭浏览器并再次打开此页面时，表格背景才会更改为原始状态。

- Crabime

1

正如@Yasin所说

使用本地存储。获取全局变量

首先将类添加到所有单元格中

假设颜色。然后

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


   }

- saiyan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user6390636 · Accepted Answer

您需要将颜色值存储在客户端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();