Javascript 需要一些帮助调试一个简单的颜色变换器吗

我正在为一个网站做一个颜色切换（暗模式/亮模式） 我在将值存储在cookie中并使其正常工作时遇到了问题。我确信我在这里犯了一些非常基本的错误，但我不知道为什么这不起作用，我想理解，也想知道是否有一种更简单的方法来做这件事

HTML

JS

localStorage.setItem（'color'，'0'）；
const colorChecker=函数（）{
if（localStorage.color.length<2）{
document.body.style.color='whitesmoke'；
document.body.style.backgroundColor='#1b1b1f'；
}
else if（localStorage.color.length>2）{
document.body.style.color='#1b1b1f'；
document.body.style.backgroundColor='whitesmoke'；
}
}
window.onload=colorChecker（）；
document.getElementById（'lightMode'）。onclick=function thisLight（）{
localStorage.color=localStorage.color+'1'；
颜色检查器（）；
}
document.getElementById（'darkMode'）。onclick=function thisDark（）{
设x=localStorage.color；
x、 切片（0，-1）；
颜色检查器（）；
}

您的

window.onload=colorChecker（）在加载窗口时运行
颜色检查器的结果。传递引用而不是调用

window.onload = colorChecker;

此外，当您将窗口颜色设置为“暗”时，您将获得对该值的引用并对其进行切片-这不会修改存储在
localStorage
中的值。您需要再次使用
setItem
：

x.slice(0, -1);
localStorage.setItem('color', x);

再次在灯光按钮处理程序中：

localStorage.setItem(localStorage.getItem('color') + '1');

想想这意味着什么——我建议使用
0
或
1
而不是使用字符串长度，因为这样更容易计算出发生了什么。以下是更新后的代码：

localStorage.setItem('color', '0');
const colorChecker = function() {
    if (+localStorage.getItem('color') == '0') {
        document.body.style.color = 'whitesmoke';
        document.body.style.backgroundColor = '#1b1b1f';
    }
    else if (localStorage.getItem('color') == '1') {
        document.body.style.color = '#1b1b1f';
        document.body.style.backgroundColor = 'whitesmoke';
   }
}

window.onload = colorChecker;

document.getElementById('lightMode').onclick = function thisLight() {
    localStorage.setItem('color', '1');
    colorChecker();
}

document.getElementById('darkMode').onclick = function thisDark() {
    localStorage.setItem('color', '0');
    colorChecker();
}

在本地存储中存储布尔值时遇到问题吗？您可以使用
JSON.parse（）
阅读它：

// Store `whiteModeOn` setting, creating item if necessary (e.g. first visit)
if (localStorage.getItem("whiteModeOn") === null) {
    localStorage.setItem("whiteModeOn", true);
}

function colorChecker() {
    /* Local storage may use strings, so we decode the bool with JSON.parse(),
       so both true or "true" will be true. */
    if (JSON.parse(localStorage.whiteModeOn)) {
        /*  CSS classes would be better here, of course */
        document.body.style.color = '#1b1b1f';
        document.body.style.backgroundColor = 'whitesmoke';
    } else {
        document.body.style.color = 'whitesmoke';
        document.body.style.backgroundColor = '#1b1b1f';
    }
}

window.onload = colorChecker; /* just reference the function */
document.getElementById('lightMode').onclick = function() {
    localStorage.setItem('whiteModeOn', true);
    colorChecker();
} 
document.getElementById('darkMode').onclick = function() {
    localStorage.setItem('whiteModeOn', false);
    colorChecker();
} 

“不知道为什么这不起作用”——我们不知道你想让它做什么。请解释您想要什么以及您看到了什么（编辑问题）。您提到了cookies，但您使用的是
localStorage
。确认，我给出了答案，但我打赌这不是问题所在-您是否有可能使用不在服务器或本地主机上的本地HTML文件来测试此问题？因为localStorage无法处理未被提供的HTML文件。我在HTML文件而不是本地主机上使用它。谢谢你的信息，我也很感激！谢谢我真的很感谢你抽出时间来帮助我。我还有一个问题。如果用户将其设置为暗模式，该数据是否仍将存储在localStorage中，或者我是否必须创建类似于cookie的文档。cookie=“”；？它将被存储在local storage@ChristopherLopez中-它有点像一个cookie，所以它会被保存。哇，是的，我确实很难将它存储为布尔值，所以这是一个混乱的解决方法，谢谢你的代码！
localStorage.setItem('color', '0');
const colorChecker = function() {
    if (+localStorage.getItem('color') == '0') {
        document.body.style.color = 'whitesmoke';
        document.body.style.backgroundColor = '#1b1b1f';
    }
    else if (localStorage.getItem('color') == '1') {
        document.body.style.color = '#1b1b1f';
        document.body.style.backgroundColor = 'whitesmoke';
   }
}

window.onload = colorChecker;

document.getElementById('lightMode').onclick = function thisLight() {
    localStorage.setItem('color', '1');
    colorChecker();
}

document.getElementById('darkMode').onclick = function thisDark() {
    localStorage.setItem('color', '0');
    colorChecker();
}

// Store `whiteModeOn` setting, creating item if necessary (e.g. first visit)
if (localStorage.getItem("whiteModeOn") === null) {
    localStorage.setItem("whiteModeOn", true);
}

function colorChecker() {
    /* Local storage may use strings, so we decode the bool with JSON.parse(),
       so both true or "true" will be true. */
    if (JSON.parse(localStorage.whiteModeOn)) {
        /*  CSS classes would be better here, of course */
        document.body.style.color = '#1b1b1f';
        document.body.style.backgroundColor = 'whitesmoke';
    } else {
        document.body.style.color = 'whitesmoke';
        document.body.style.backgroundColor = '#1b1b1f';
    }
}

window.onload = colorChecker; /* just reference the function */
document.getElementById('lightMode').onclick = function() {
    localStorage.setItem('whiteModeOn', true);
    colorChecker();
} 
document.getElementById('darkMode').onclick = function() {
    localStorage.setItem('whiteModeOn', false);
    colorChecker();
}