Javascript 未保存本地存储（Vanilla JS）？_Javascript_Css

Javascript 未保存本地存储（Vanilla JS）？

javascript css

Javascript 未保存本地存储（Vanilla JS）？,javascript,css,Javascript,Css,我是新来的（通常是编码），但每个人都说，一旦你有问题，你在Stackoverflow中找不到答案，你应该问，但我总是发现这个问题可能太愚蠢了问题是，我试着为明暗模式设置一个切换器，它工作得很好，但是一旦你刷新了页面，主题更改就不会被保存。我发现使用JavaScript可以通过使用“localStorage.setItem（）”在本地存储更改，但它并没有像我预期的那样工作。我将尽力提供尽可能多的细节：我为我的body标签创建了两个css类：“dark”和“light”，每个类都有自己的颜色c

我是新来的（通常是编码），但每个人都说，一旦你有问题，你在Stackoverflow中找不到答案，你应该问，但我总是发现这个问题可能太愚蠢了

问题是，我试着为明暗模式设置一个切换器，它工作得很好，但是一旦你刷新了页面，主题更改就不会被保存。我发现使用JavaScript可以通过使用“localStorage.setItem（）”在本地存储更改，但它并没有像我预期的那样工作。我将尽力提供尽可能多的细节：

我为我的body标签创建了两个css类：“dark”和“light”，每个类都有自己的颜色css变量。注意：我没有两个body标签，它只是显示我必须在两个类之间切换的两个类

在这之前，一切都会从一个变到另一个

最后，我添加了一种方法，通过修改/利用（或我认为的）前面的函数，尝试将其存储在本地：

在这一点上，我可以在Chrome的应用程序>本地存储中看到，每当我点击时，它确实会改变主题，它也会将键的值从“enabled”更改为null，反之亦然，但一旦我刷新页面，它会返回到我的“light”主题，尽管键仍然是“enabled”。事实上，在这一点上，我可以点击再次打开黑暗主题，显然，键的值保持不变；但如果我像预期的那样再次单击它，它将返回空值（灯光模式）

提前感谢您的帮助

这是因为实际的更改仅在单击事件中完成，所以您需要创建一个在加载页面时调用的事件，并在该函数中，从本地存储中读取数据，并根据它更改css。您不需要事件，只需剪切或复制click event函数中的所有代码，并将其粘贴到文档的最后（当然是在脚本标记内）

或者最好还是打个电话

switchBtn.dispatchEvent（新事件（“单击”））

另外，有两个body标签可能会有问题，我建议切换到div

为什么在本地存储中使用两个不同的键名（

dark

和

darkTheme

）？您好，请注意：多个body元素无效（这可能是它不起作用的原因，因为只有第一个body（或最后一个body）标记将被考虑-这将取决于浏览器的实现），我确信我在W3C规范中读到了它，但找不到直接的来源，所以我提前道歉。@RobertMolina我很抱歉我没有充分澄清它，但没有两个主体标记，这只是为了显示我拥有的两个类，但实际上，这只是一个身体标签，它的等级从亮变暗，反之亦然，但非常感谢你们@HernánAlarcón在localStorage中（如果我没有弄错的话），我只注册了一个，它是“暗色”，而“暗色”是我从body标签更改的类，所以我可以用“浅色”css类来回切换，但我可能弄错了：S@HernánAlarcón对不起！我明白你的意思，在最顶端我有一个localStorage.getItem（'dark'），函数后面的第一行也是一样，它应该是localStorage.getItem（'darkTheme'），但我同时更改了这两个类，它似乎也不起作用：很抱歉，我没有充分说明这一点，但没有两个body标记，这只是为了显示我拥有的两个类，但实际上，只有一个body标记的类从亮变暗，反之亦然，但非常感谢！我添加了最后一行代码，现在它继续返回到改为“黑暗”主题。脚本位于使用django的标记{%include'scripts.html%}的body标记的最后。我将尽最大努力研究您与我共享的那行代码，因为-由于我是新手-我认为我可能没有正确实现它。再次感谢：）@victor I Hi尝试创建一个没有任何库的新html文件，或者如果click事件不起作用，只需将所有按钮代码复制到底部，看看会发生什么

<body class='light'>(all the content)</body>
<body class='dark'>(all the content)</body>

const switchBtn = document.querySelector('.slider');
switchBtn.addEventListener('click', () => {
if(document.body.classList.contains('light')) {
        document.body.classList.replace('light', 'dark');
    }
    else
    {
        document.body.classList.replace('dark', 'light');
    };     
});

let darkTheme = localStorage.getItem('dark');

switchBtn.addEventListener('click', () => {
    darkTheme = localStorage.getItem('dark'); //Trying update the info stored about the darkTheme    
    if(document.body.classList.contains('light') && darkTheme == null) {
        document.body.classList.replace('light', 'dark');
        localStorage.setItem('darkTheme', 'enabled');
    }
    else
    {
        document.body.classList.replace('dark', 'light');
        localStorage.setItem('darkTheme', null);
    };     
});