CSS 切换以将 class 添加到具有本地存储的 DIV

Question

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

这是我目前的代码 - 然后“切换颜色”按钮会将正文 class 标签更改为蓝色

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

来存储它

提前致谢，布莱恩

Answer 1

本地存储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)
      } 
    })()

Answer 2

对于更动态的解决方案（如果您有两种以上的颜色会怎样？），我会改为使用 CSS 变量，其中默认颜色为红色。 Stack Overflow 不允许从 localStorage 读取，所以我将注释掉该代码，而是使用一个变量来进行演示。

我认为代码是不言自明的。

const BACKGROUND_KEY = 'background';

var forDemoPurposeOnly = '';

function myFunction() {  
  let isBlue = readFromLocalStorage(BACKGROUND_KEY) == 'blue';
  let color = (isBlue) ? 'red' : 'blue';

  setBackgroundColor(color);
}

function setBackgroundColor(color) {
  let root = document.documentElement;
  root.style.setProperty('--user-selected-background', color);
  setInLocalStorage(BACKGROUND_KEY, color);
}

function readFromLocalStorage(key) {
  return forDemoPurposeOnly;
  // return localStorage.getItem(key);
}

function setInLocalStorage(key, value) {
  forDemoPurposeOnly = value;
  // localStorage.setItem(key, value);
}

:root {
  --background-color: var(--user-selected-background, red); /* defaults to 'red' */
}

body {
  background-color: var(--background-color);
}

<body onload="setBackgroundColor(readFromLocalStorage('background'))">

<p>Click the button to change the colour of page</p>
    
<button onclick="myFunction()">Change background colour</button>

</body>

CSS 切换以将 class 添加到具有本地存储的 DIV

CSS Toggle Switch to add a class to a DIV with local storage

javascript

css

local-storage