将暗模式/亮模式保存到本地存储答案

【问题标题】：save dark mode/light mode to localStoage将暗模式/亮模式保存到本地存储
【发布时间】：2020-12-14 02:11:37
【问题描述】：

我有一个暗模式功能。 HTML、SCSS 和 javascript 工作正常。

但是当我刷新页面时，一切都恢复了正常，而不是在黑暗模式下。

我想将深色模式和浅色模式的值保存到localStorage。但我很困惑，我不知道该怎么做。有没有人可以帮助我？请帮帮我

我已经搜索了几个搜索，但仍然无法正常工作。如果您不能回答我的问题，请不要将此帖子设为类似帖子。因为我已经阅读并实现了它，但它不起作用。

这是我的CODEPEN

模式切换器 HTML

 <div id="modeSwitcher">
   <input type="checkbox" class="checkbox" id="chk" />
   <label class="label" for="chk">
     <i class="fas fa-moon"></i>
     <div class="ball"></div>
   </label>
</div>

SCSS

#modeSwitcher{
    margin: 5% 50%;

    .checkbox {
        opacity: 0;
        position: absolute;
        &:checked + {
            .label {
                .ball {
                    transform: translateX(35px);

                    &::after{
                        content: '';
                        position: absolute;
                        background-color: #0A0E27;
                        width: 13px;
                        height: 13px;
                        border-radius: 50%;
                        bottom: 50%;
                        left: -5%;
                        transform: translateY(50%);

                    }
                }
            }
        }
    }

    .label {
        background-color: #0A0E27;
        border-radius: 50px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        margin: 0;
        position: relative;
        height: 16px;
        width: 50px;
        transform: scale(1.5);

        .fa-moon{
            color:#0A0E27 ;
        }

        .ball {
            background-color: #FDC503;
            border-radius: 50%;
            position: absolute;
            top: 3px;
            left: 3px;
            height: 20px;
            width: 20px;
            transform: translateX(0px);
            transition: transform 0.2s linear;
        }
    }
}

body{
  background-color: #fff;
    &.dark{
        background-color: black;
    }
}

Javascript

const check = document.getElementById('chk');

check.addEventListener('change', () => {
  document.body.classList.toggle('dark');
  localStorage.darkMode=!localStorage.darkMode;
});

window.onload=function() {
  if(localStorage.darkMode) document.body.classList.toggle('dark');
}

【问题讨论】：

标签： javascript sass local-storage

【解决方案1】：

在 css 中修改：

body.dark {
  background-color: black;
}
body.light {
  background-color: whitesmoke;
}

用javascript修改这个：

window.onload=function() {
  if(localStorage.darkMode=="true") {
    document.body.classList.toggle('dark');
    document.getElementById("chk").checked=true;
  }
  else {
    document.body.classList.toggle('light');
  }
};
document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode=(localStorage.darkMode=="true")?"false":"true";
});

【讨论】：

它总是进入暗模式，当我点击亮模式时，值不存在
什么是“灯光模式”？我只看到暗模式复选框。
我们可以选择使用浅色模式或深色模式，我的意思是
什么意思？
我尝试使用 sessionStorage，当我刷新页面时它仍然存在（值），当我关闭浏览器并再次打开它时，该值被重置。谢谢你帮助我:) @iAmOren

【解决方案2】：

你可以用这行localStorage.setItem('darkMode', 'true');存储数据

你可以用这个var darkMode = localStorage.getItem('darkMode');检索

然后用你自己的逻辑应用你的风格

【讨论】：

如果您再次取消选中该复选框，这将无济于事。
localStorage.setItem('darkMode', 'true') 可以缩短为localStorage.darkMode=true，darkMode=localStorage.getItem('darkMode') 可以缩短为darkMode=localStorage.darkMode。注意：在定义/保存之前，localStorage.getItem('darkMode') 返回 null - 即使未定义（！）和 localStorage.darkMode 返回 undefined。
您还可以根据此值填充您的复选框。