【发布时间】：2020-08-11 12:05:36
【问题描述】：
我是新来的（通常是编码），但每个人都说，一旦你有问题并且无法在 Stackoverflow 中找到答案，你应该问，但我一直发现问题可能是太笨了。
问题是，我试图为明暗模式设置一个切换器，它工作正常，但是一旦你刷新页面，主题更改并没有被保存。我发现使用 JavaScript，您可以使用“localStorage.setItem()”在本地存储更改，但它没有按我预期的那样工作。我会尽量提供尽可能多的细节：
- 我为我的 body 标签创建了两个 css 类：“dark”和“light”，每个类都有自己的颜色 css 变量。注意：我没有两个body标签，只是为了显示我必须在两个类之间切换。
<body class='light'>(all the content)</body>
<body class='dark'>(all the content)</body>
- 从一个切换到另一个的切换是由一个带有 css 类“.slider”的切换器触发的，每次单击时都会调用它：
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);
};
});
此时，我可以在 Chrome 的应用程序 > 本地存储中看到，每次单击时，它都会更改主题，并且还会将键的值从“启用”更改为 null，反之亦然，但是一旦我刷新该页面，它返回到我的“轻”主题，尽管密钥仍然“启用”。事实上，此时我可以再次单击打开深色主题，显然，键的值保持不变；但是如果我再次单击它，如预期的那样，它会返回空值（灯光模式）。
提前感谢您的帮助！
【问题讨论】：
-
为什么在本地存储中使用两个不同的键名（
dark和darkTheme）？ -
您好，请注意：多个正文元素无效（这可能是它不起作用的原因，因为只会考虑第一个正文（或最后一个正文）标签 - 这取决于浏览器实现），我确定我在 W3C 规范中的某个地方读过它，但找不到直接来源，所以我提前道歉。
-
@RobertMolina 对不起，我没有说清楚，但没有两个body标签，只是为了显示我拥有的两个类，但实际上，它只是一个body标签的类从亮到暗，反之亦然，但非常感谢！
-
@HernánAlarcón 在 localStorage 中（如果我没记错的话），我只注册了一个，即“darkTheme”，而“dark”是我从我的身体标签更改的类，所以我可以用'light' css类来回切换它，但我可能弄错了：S
-
@HernánAlarcón 对不起！我明白你的意思，在最上面我有一个 localStorage.getItem('dark')，函数后面的第一行也是如此，它应该是 localStorage.getItem('darkTheme')，但我都改变了它似乎也不起作用：S
标签： javascript css