正如你所看到的,我将它存储在 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 ();
}
});
最佳答案
我想你失踪了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
事件!
关于javascript - 为什么我的浅色主题在页面重新加载后会重置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72658232/