明暗主题切换代码的localStorage存储与读取问题排查

问题根源 #

1. 存储时机错误：当前setLocalStorage()仅在页面初始加载时执行一次，点击切换主题按钮后没有触发存储更新，导致localStorage里的主题状态始终停留在初始值。
2. 初始化顺序颠倒：先执行setLocalStorage()再执行getLocalStorage()，会直接覆盖之前存储的主题状态——比如之前存的是light，但页面初始无light类，set会把theme设为dark，随后get又移除light，等于读取操作完全失效。

修复后的代码 #

// 读取本地存储恢复主题状态
function getLocalStorage() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'light') {
        body.classList.add('light');
        navbar.classList.add('light');
        sideBar.classList.add('light');
        // 同步其他需要切换主题的元素
    } else {
        body.classList.remove('light');
        navbar.classList.remove('light');
        sideBar.classList.remove('light');
        // 同步其他需要切换主题的元素
    }
}

// 将当前主题状态存入localStorage
function setLocalStorage() {
    localStorage.setItem('theme', body.classList.contains('light') ? 'light' : 'dark');
}

// 绑定主题切换按钮事件
function initThemeToggle() {
    lightBtn.addEventListener('click', function () {
        body.classList.add('light');
        navbar.classList.add('light');
        sideBar.classList.add('light');
        // 同步其他需要切换主题的元素
        setLocalStorage(); // 切换后立即更新存储
    });

    darkBtn.addEventListener('click', function () {
        body.classList.remove('light');
        navbar.classList.remove('light');
        sideBar.classList.remove('light');
        // 同步其他需要切换主题的元素
        setLocalStorage(); // 切换后立即更新存储
    });
}

// 初始化：先恢复主题，再绑定切换事件
getLocalStorage();
initThemeToggle();

关键优化点 #

• 初始化时优先读取存储恢复主题，确保页面加载时应用之前保存的设置。
• 每次点击切换按钮后立即调用setLocalStorage()，同步更新localStorage里的主题状态。
• 合并切换逻辑到一个初始化函数，精简冗余代码，让结构更清晰。

内容的提问来源于stack exchange，提问作者Berk Bıçakcı