localstorage刷新背景页面不变色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    ul {
        width: 500px;
        height: 150px;
        margin: 100px auto;
        display: block;
    }
    li {
      list-style: none;
      float: left;
      padding: 15px;
      border: 1px solid #ccc;
      margin-left: 20px;
      cursor: pointer;
      border-radius: 5px;
    }
    .red {
      background-color: red;
    }
    .yellow {
      background-color: yellow;
    }
    .green {
      background-color: green;
    }
 h2{
     margin-top: 100px;
     text-align: center;
 }
  </style>
  <body>
      <h2>使用localstorage刷新页面背景不变色</h2>
    <ul >
      <li>更换红色背景</li>
      <li>更换黄色背景</li>
      <li>更换绿色背景</li>
    </ul>
    <script>
      let arr = ["red", "yellow", "green"];
      let ul = document.querySelector("ul");
      let lis = ul.querySelectorAll("li");
      for (let i = 0; i < lis.length; i++) {
        lis[0].onclick = function () {
          document.body.style.backgroundColor = arr[0];
          window.localStorage.setItem("bgcolor", arr[0]);
        };
        lis[1].onclick = function () {
          document.body.style.backgroundColor = arr[1];
          window.localStorage.setItem("bgcolor", arr[1]);
        };
        lis[2].onclick = function () {
          document.body.style.backgroundColor = arr[2];
          window.localStorage.setItem("bgcolor", arr[2]);
        };
      }
      window.onload =function(){
       document.body.style.backgroundColor = localStorage.getItem('bgcolor')
      }
    </script>
  </body>
</html>
相关文章
