javascript - 保存暗模式首选项 (localStorage) 的问题

Question

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

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

下面是我的 fiddle 和我的 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

您需要为 localStorage 设置一个 bool 值:

$("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');  
}