有没有办法通过使用本地存储来制作恒定的“暗模式”？答案

【问题标题】：Is there a way to make a constant "dark mode" by using local Storage?有没有办法通过使用本地存储来制作恒定的“暗模式”？
【发布时间】：2019-09-13 19:37:46
【问题描述】：

我一直在制作一个带有默认“浅色模式”和深色模式按钮的小型网站，以将其更改为夜间用户的深色模式。我想使用 JS 中的 localStorage 使暗模式保持不变，所以当你按下它一次并转到网站上的另一个页面时，它会保持暗模式。但我似乎无法让它工作。

当我将 localStorage 键的“模式”设置为“暗”时，当我转到该站点的另一个页面时，它默认为亮模式。

这里是js代码：

let mode;
mode = localStorage.getItem('mode');

if (mode = 'light'){
    lightMode();
}else{
    darkMode();
}

function darkMode() {
    document.getElementById("title").style.color = "white";
    document.body.style.backgroundColor = "#040040";
    //code...
    document.getElementById("darkmodebtn").style.color = "black";
    document.getElementById("darkmodebtn").style.backgroundColor = "white";
    document.getElementById("darkmodebtn").onclick = lightMode;
    document.getElementById("darkmodebtn").innerHTML = "Light Mode";
    localStorage.setItem('mode', 'dark');
    mode = localStorage.getItem('mode');
}

function lightMode() {
    document.getElementById("title").style.color = "black";
    document.body.style.backgroundColor = "lightblue";
    //more code...
    document.getElementById("darkmodebtn").style.color = "white";
    document.getElementById("darkmodebtn").style.backgroundColor = "black";
    document.getElementById("darkmodebtn").onclick = darkMode;
    document.getElementById("darkmodebtn").innerHTML = "Dark Mode";
    localStorage.setItem('mode', 'light');
    mode = localStorage.getItem('mode');
}

这里是按钮的html：

<div id="darkmode">
    <button id="darkmodebtn" onclick="darkMode()">Dark Mode</button>
</div>

打开网站上的any页面出现一个错误，就是：

Uncaught TypeError: Cannot read property 'style' of null
    at lightMode (script.js:79)
    at script.js:57

其中描述了 lightMode 函数第一行的错误，但我不知道这是否是问题的一部分。

【问题讨论】：

错误提示在您运行脚本时找不到 ID 为 title 或 darkmodebtn 的元素。

标签： javascript html

【解决方案1】：

问题在于这一行：

if (mode = 'light')

mode = 'light' 是一个赋值，将“光”存储在模式变量中。但就 if 语句而言，它也是一个计算结果为 'light' 的表达式，if 将其解释为 true。因此，您将始终处于光照模式。

if (mode === 'light') 是你想要的。

【讨论】：

虽然这是代码不起作用的原因之一，但这并不能回答Uncaught TypeError的问题

【解决方案2】：

要检查条件是true 还是false，您必须使用=== 来比较它们。

if (mode === 'light'){
    lightMode();
}else{
    darkMode();
}

修复错误Uncaught TypeError: Cannot read property 'style' of null，

您应该在生成所有 DOM 之后放置代码，

例如：

<html>
    <head></head>
    <body>
        <div id="title"></div>
        <script>
            // place your code here!
        </script>
    </body>
</html>

【讨论】：

我不敢相信我没有注意到只有一个等号哈哈。并感谢您帮助我解决错误！
我想办法是将

【解决方案3】：

您可以为不同的模式使用两个单独的 css 文件。

if(lightmode===true) {
  document.getElementById("stylesheet").setAttrubute("href","light.css");}
else {
  ...//else block
}

【讨论】：