编辑

Question

我正在尝试使用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');  
}

Answer 1

您需要将布尔值设置为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');  
}

Answer 2

这对我有用（我将暗模式戴在了身上）：

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

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

2 个答案:

编辑