时间戳

首页 > 解决方案 > 如何使用 localStorage 让浏览器记住亮/暗模式主题切换的类列表切换状态？

javascript - 如何使用 localStorage 让浏览器记住亮/暗模式主题切换的类列表切换状态？

问题描述

我正在开发具有明暗模式主题开关的投资组合网站。开关工作，但它不保存输入。因此，当用户刷新或单击导航链接时，网站会返回默认的光照模式。我希望它记住状态。我知道我必须使用 localStorage 才能使其工作，但我似乎不知道该怎么做。

网站： www.hermanvulkers.com

JavaScript 主题切换代码：


button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Turn light mode off -> dark mode on
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;

    } else {
        // Turn dark mode off -> light mode on  
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
        
    }
});

HTML按钮代码：

<button class="themeswitcher" id="themeswitcher">
    <span>Dark</span>
    <img src="images/moon.png" alt="Choose website theme">
</button>

有人能帮忙吗？提前致谢！

标签： javascript

解决方案

您的代码过于复杂。

这里是完整版

window.addEventListener("load",function() {
  const theme = localStorage.getItem("theme");
  if (theme) document.body.classList.toggle("light-theme",theme==="light")
  document.getElementById("themeswitcher").addEventListener("click", function () {
    const light = document.body.classList.contains("light-theme")
    this.innerHTML = `<span>${light? 'Dark' : 'light'}</span><img src="images/${light? 'moon' : 'sunrise'}.png" alt="Choose website theme">`;
    document.body.classList.toggle("light-theme");
    localStorage.setItem("theme",light?"dark":"light");
  });
});

推荐阅读