Question

此处是新手编码器。有基本功能可以根据需要执行，但是我对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")
}

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

Answer 1

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

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

Answer 2

您将主题存储在localStorage.setItem()中，但从未用localStorage.getItem()调用它

页面加载：

var body = document.getElementById("body");
body.className = localStorage.getItem("theme");

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

2 个答案: