时间戳

首页 > 解决方案 > 如何为两个独立的功能设置本地存储（暗光模式）

javascript - 如何为两个独立的功能设置本地存储（暗光模式）

问题描述

新手编码器在这里。得到了根据需要做的基本功能，但我对Javascript一无所知，但愿意学习。我正在从网络上借用代码。我在下班后开发我们的商业网站，就像我白天的工作一样，我是一名建筑主管，所以只能在晚上这样做。现在我只需要能够将颜色主题选择存储在 localStorage 中，并在浏览器重新打开时调用它。这就是我选择 localStorage 的原因。

已经尝试过 localStorage 上的指南，但我对如何正确调用并存储选择感到目瞪口呆。这两个按钮功能完美地改变了我的导航栏的颜色，并改变了最基本的主体颜色和字体颜色。

// Light-Mode
function toggleLight() {
    var body = document.getElementById("body");
    var currentClass = body.className;
    body.className = currentClass == "dark-mode" ? "light-mode" : "light-mode";
    document.getElementById("nav").className = "navbar sticky-top navbar-expand-sm navbar-dark bg-dark";
    localStorage.setItem("theme", "light-mode")
}

//Dark-Mode        
function toggleDark() {
    var body = document.getElementById("body");
    var currentClass = body.className;
    body.className = currentClass == "light-mode" ? "dark-mode" : "dark-mode";
    document.getElementById("nav").className = "navbar sticky-top navbar-expand-sm navbar-light bg-light";
    localStorage.setItem("theme", "dark-mode")
}

我希望它能够存储和回忆浏览器重新加载时最后选择的颜色/主题，但似乎我缺少一些主要的编码。任何帮助将不胜感激。

标签： javascriptlocal-storage

解决方案

在每个函数的末尾，主题名称保存在 localStorage 中。在onLoad事件中读取此值并调用相应的函数：

window.onload = () => {
    if (localStorage.getItem("theme") === "dark-mode") {
        toggleDark();
    } else {
        toggleLight(); // consider as default theme
    }
};

推荐阅读