保存暗模式首选项（localStorage）的问题

Question

我正在尝试使用 localStorage 在我的网站上保存暗模式首选项。我遇到的问题是当您切换到暗模式并点击刷新时，它会保持在暗模式。但是，如果您切换到深色模式，然后再切换回浅色模式，然后点击刷新，它会加载深色模式。

到目前为止，我还没有找到任何有用的资源。

这是我的小提琴以及下面的 js 脚本。

Fiddle

Javascript

$(document).ready(function(){
    $('ul').click(function(){
        $('ul').toggleClass('active')

        let darkThemeEnabled = $('section').toggleClass('dark');

        localStorage.setItem('dark-theme-enabled', darkThemeEnabled);
    })
})

if (localStorage.getItem('dark-theme-enabled')) {
    $('section').toggleClass('dark');

    $('ul').toggleClass('active');  
}

Answer 1

这对我有用（我把黑暗模式放在身上）：

const body = document.querySelector('body');
const checkBox = document.getElementById('checkbox');

window.addEventListener('load', () => {        

    if (!localStorage.dark_mode)
        localStorage.dark_mode = false;

    else if (JSON.parse(localStorage.dark_mode) === true) {
            body.classList.add('dark-mode');
            checkbox.checked = true;
            }
});

checkBox.addEventListener('click', (e) => {
    body.classList.toggle('dark-mode');

    if (body.classList.contains('dark-mode')) {
        checkbox.checked = true;
        localStorage.dark_mode = true;
    }
    else {
        checkbox.checked = false;
        localStorage.dark_mode = false;
    }
});

Answer 2

您需要将布尔值设置为localStorage：

$("section").toggleClass("dark");
let darkThemeEnabled = $("section").hasClass("dark");
localStorage.setItem("dark-theme-enabled", darkThemeEnabled);

编辑

同时改变你的获取方式：

if (localStorage.getItem('dark-theme-enabled')) {
    $('section').addClass('dark');
    $('ul').addClass('active');  
}