如何为两个单独的功能设置本地存储(暗光模式)

时间:2019-05-06 16:30:57

标签: javascript local-storage

此处是新手编码器。有基本功能可以根据需要执行,但是我对Java毫无头绪,但愿意学习。我从网上借来的代码。我下班后正在开发我们的商业网站,因为白天的工作是建筑主管,所以只能在晚上进行。现在,我只需要能够将颜色主题选择存储在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")
}

我希望它可以存储并调用浏览器重新加载时最后选择的颜色/主题,但是似乎我缺少一些主要的编码。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

您将主题存储在localStorage.setItem()中,但从未用local​Storage​.get​Item()调用它

页面加载:

var body = document.getElementById("body");
body.className = local​Storage​.get​Item("theme");