LocalStorage 没有被保存（Vanilla JS）？
我是新来的（通常是编码），但每个人都说一旦你有问题并且无法在 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，反之亦然，但是一旦我刷新页面，它返回到我的“浅色”主题，尽管该键仍处于“启用”状态。事实上，此时我可以再次点击打开深色主题，显然，键的值保持不变；但如果我再次单击它，如预期的那样，它会返回到空值（浅色模式）。
慕尼黑56888551回答
-
浮云间
这是因为实际更改仅在点击事件中完成，您需要创建一个在页面加载时调用的事件，并在该函数中从本地存储读取并根据它更改 css。您不需要事件，只需剪切或复制点击事件函数中的所有代码并将其粘贴到文档的最后（当然在脚本标签内）或者更好的是打电话switchBtn.dispatchEvent（新事件（“点击”））还有两个 body 标签可能会有问题我建议切换到 div
随时随地看视频慕课网APP
相关分类
JavaScript