切换页面时如何保持灯光模式？

Question

所以我的网站默认是深色模式，我添加了一个浅色模式按钮让网站变亮 我想在切换页面时保持灯光模式，如何在切换页面时保持灯光模式。 JS

//light mode for home page
function lightMode() {


    var element = document.body;
    element.classList.toggle("light-mode");

    var buttonText = document.getElementById('lightModeButton');
    if (buttonText.innerHTML === "Light") {
        buttonText.innerHTML = "Dark";

    }

    else {
        buttonText.innerHTML = "Light"
    }



    var footerLight = document.getElementById('footer');
    footerLight.classList.toggle("footer-color");
    footerLight.classList.toggle("footer-color a");




}

// light mode function for my information page

function lightModeInformation() {

    var textInfo = [document.getElementById('textInformation'), document.getElementById('textInformation2'), document.getElementById('h1Information')];
    textInfo[0].classList.toggle("text-when-light");
    textInfo[1].classList.toggle("text-when-light");
    textInfo[2].classList.toggle("text-when-light");

    var element = document.body;
    element.classList.toggle("light-mode");

    var buttonText = document.getElementById('lightModeButton');
    if (buttonText.innerHTML === "Light") {
        buttonText.innerHTML = "Dark";

    }

    else {
        buttonText.innerHTML = "Light"
    }

    var footerLight = document.getElementById('footer');
    footerLight.classList.toggle("footer-color");
    footerLight.classList.toggle("footer-color a");


}

我尝试使用 if 语句，但没有用

Answer 1

实现此目的的一个好方法是使用类似 localStorage 或 sessionStorage 的变量。当用户关闭选项卡/浏览器时，会话存储将被清除，但 localStorage 将被保留，直到用户手动清除。

在模式之间切换时，您可以执行 localStorage.setItem('mode', 'dark') 或 localStorage.setItem('mode', 'light') 之类的操作，然后在页面加载时您可以再次检查模式并应用它。

类似的东西：

window.addEventListener("load", (event) => {
  let mode = localStorage.getItem('mode')
  if(mode === 'light'){
      lightMode()
  }
});

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

我建议在localStorage 中保存有关用户是使用亮模式还是暗模式的信息。您可以从来自同一域的每个站点上的 localStorage 访问此变量。如果您不手动删除它，它还会保留会话。

例如将模式设置为 localStorage.setItem('mode', 'light'); 并像const mode = localStorage.getItem('mode');一样引用它

查看docs。