Javascript 保存暗模式首选项时出现问题（本地存储）

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

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

下面是我的小提琴和我的js脚本

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

---

您需要将布尔值设置为

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

这对我很有效（我把我的黑暗模式放在我的身体上）：

---

我刚刚尝试添加了它，得到了相同的结果，它记住了暗模式，但当切换到亮和刷新浏览器时，它会加载暗模式。抱歉，刚刚解决了你的问题@trevorc，我会更新我的答案。嘿@jack，我仍然在使用该获取方法时遇到同样的问题。我做了更多的研究并添加了JSON.parse，比如->“if（JSON.parse（localStorage.getItem（'dark-theme-enabled'））”似乎对其他人有效，但当我这样做时，我得到了一个未捕获的语法错误：意外的标记o-仍然给我带来了只返回黑暗模式的相同问题。@JackBashford我没有太多使用localStorage，但是看起来是这样的。是的@ChrisHappy-但它们仍然是真实的，这就是我使用的

if

语句的工作原理。

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