将深色模式/浅色模式保存到 localStoage

Question

我有一个黑暗模式功能。 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');
}

Answer 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";
});

Answer 2

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

，并且可以使用这一行检索 var darkMode = localStorage.getItem('darkMode');< /code>

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