时间戳

首页 > 解决方案 > 有没有办法通过使用本地存储来制作恒定的“暗模式”？

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

问题描述

我一直在制作一个带有默认“浅色模式”和深色模式按钮的小型网站，以将其更改为夜间用户的深色模式。我想使用 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>

打开网站上的任何页面时出现一个错误，即：

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

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

标签： javascripthtml

解决方案

问题在于这一行：

if (mode = 'light')

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

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

推荐阅读