CSS Toggle Switch 将类添加到具有本地存储的 DIV答案

【问题标题】：CSS Toggle Switch to add a class to a DIV with local storageCSS Toggle Switch 将类添加到具有本地存储的 DIV
【发布时间】：2021-02-08 01:28:13
【问题描述】：

我正在尝试创建一个简单的切换开关来向 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 来存储它？

提前致谢，布赖恩

【问题讨论】：

标签： javascript css local-storage

【解决方案1】：

对于更动态的解决方案（如果您有两种以上的颜色会发生什么？），我会改为使用默认颜色为红色的 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>

【讨论】：

【解决方案2】：

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

【讨论】：

嗨，Spirift，感谢上述解决方案，刷新页面后它会存储 body.blue 状态 - 但如果选择了红色背景（默认正文样式），它总是会恢复为正文。蓝色状态一旦变为蓝色？ - 理想情况下，我需要本地存储来记住 body.blue 或默认的正文（红色）样式。这可能吗？我希望根据 body.blue 或默认（红色）主体样式设置页面上其他元素的样式。本质上，我试图通过切换在两个 body 类之间切换 - 而不仅仅是背景颜色。
道歉我认为我原来的帖子有点混乱！ - 我希望以上内容有意义？ - 这是我的测试页面的链接 - dan-mcneil.com/body-class-change.html
当页面变回红色时，再次用红色更新本地存储