为什么我的轻主题重置后，页面被重新加载？

Question

正如您所看到的，我将它存储在localStorage中，它运行得很好。当我重新加载页面时，会出现问题，它会重新回到主(黑暗)主题。

let lightMode = localStorage.getItem("theme")

const lightModeToggle = document.querySelector(".moon-white");

const enableLightMode = () => {
    document.body.classList.add("light-theme");

    localStorage.setItem("theme", "enabled");
};

const disableLightMode = () => {
    document.body.classList.remove("light-theme");

    localStorage.setItem("theme", null);
};

lightModeToggle.addEventListener("click", () => {
    lightMode = localStorage.getItem("theme");
    if (lightMode !== 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode ();
    }
});

Answer 1

我认为您缺少document.onload侦听器从localStorage读取当前主题，然后在将其加载到DOM时将其设置为文档。

let lightMode = localStorage.getItem("theme")

const lightModeToggle = document.querySelector(".moon-white");

const enableLightMode = () => {
    document.body.classList.add("light-theme");

    localStorage.setItem("theme", "enabled");
};

const disableLightMode = () => {
    document.body.classList.remove("light-theme");

    localStorage.setItem("theme", null);
};

lightModeToggle.addEventListener("click", () => {
    lightMode = localStorage.getItem("theme");
    if (lightMode !== 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode();
    }
});

document.addEventListener("load", () => {
    if (lightMode === 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode();
    }
});

更新:使用onload进行load事件！

Answer 2

它可以工作，但我没有使用document.addEventListener("onload", () =>，而是使用了：

window.addEventListener('load', (event) => {
lightMode = localStorage.getItem("theme"); 
    if (lightMode === 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode();
    }
});