CSS切换开关可将类添加到具有本地存储的DIV中

debugcn 发表于 Dev

布赖恩

我正在尝试创建一个简单的切换开关，以将新类添加到body标签。默认情况下，页面为红色。通过单击按钮，页面在红色和蓝色之间切换。

这是我到目前为止的代码-然后，“切换颜色”按钮会将body类标签更改为蓝色

  <body>
<p>Click the button to change the colour of page</p>
    
    <button onclick="myFunction()">Change background colour</button>
    
    <script>
    function myFunction() {
       var element = document.body;
       element.classList.toggle("blue");
    }
    </script>
    
    </body>

CSS位

body {
  background-color: red;
  color: white;
}

body.blue {
  background-color: blue;
}

我苦苦挣扎的一点是在刷新页面或移至另一页面时保留设置。有没有一种方法可以通过本地存储和JavaScript存储该文件？

预先感谢，Brian

精神

本地存储API使用起来超级简单。localStorage在浏览器中可以作为全局变量使用，您可以将字符串值与键一起存储，然后使用键来检索值。

function myFunction() {
       var element = document.body;
       element.classList.toggle("blue");
       var background = localStorage.getItem('background')
      
       if (background === 'blue') {
         localStorage.setItem('background', 'red')
       } else {
         localStorage.setItem('background', 'blue')
       }
    }
    (function() {
      var background = localStorage.getItem('background')
      
      if (background === 'blue') {
        
        document.body.classList.add(background)
      } 
    })()

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。