Javascript 将暗模式/亮模式保存到localStoage

我有一个暗模式功能。HTML、SCS和javascript工作正常

但当我刷新页面时，一切都恢复正常，而不是在黑暗模式下

我想保存这些值​​将暗模式和亮模式转换为本地存储。但是我很困惑，我不知道怎么做。有人能帮我吗？请帮帮我

我已经搜索了好几次了，但还是不起作用。如果你不能回答我的问题，请不要把这篇文章变成类似的文章。因为我已经阅读并实现了它，但它不起作用

这是我的

模式切换程序HTML

 <div id="modeSwitcher">
   <input type="checkbox" class="checkbox" id="chk" />
   <label class="label" for="chk">
     <i class="fas fa-moon"></i>
     <div class="ball"></div>
   </label>
</div>

Javascript

const check = document.getElementById('chk');

check.addEventListener('change', () => {
  document.body.classList.toggle('dark');
  localStorage.darkMode=!localStorage.darkMode;
});

window.onload=function() {
  if(localStorage.darkMode) document.body.classList.toggle('dark');
}

---

您可以使用以下行存储数据

localStorage.setItem（'darkMode'，'true'）

您可以使用这个
var darkMode=localStorage.getItem（'darkMode'）进行检索

然后用你自己的逻辑应用你的风格
在css中修改它：

body.dark {
  background-color: black;
}
body.light {
  background-color: whitesmoke;
}

在javascript中修改此选项：

window.onload=function() {
  if(localStorage.darkMode=="true") {
    document.body.classList.toggle('dark');
    document.getElementById("chk").checked=true;
  }
  else {
    document.body.classList.toggle('light');
  }
};
document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode=(localStorage.darkMode=="true")?"false":"true";
});

如果再次取消选中该复选框，则此选项无效。
localStorage.setItem（'darkMode'，'true'）
可以缩短为
localStorage.darkMode=true
，而
darkMode=localStorage.getItem（'darkMode'）
到
darkMode=localStorage.darkMode
。注意：在定义/保存之前，
localStorage.getItem（'darkMode'）
返回
null
-即使未定义（！）和
localStorage.darkMode
返回
undefined
。您也可以基于此值填充复选框。当我单击亮模式时，该值始终变为暗模式，而不是什么“亮模式”？我只看到暗模式复选框。我们可以选择使用亮模式或暗模式，我的意思是什么？我尝试使用sessionStorage，当我刷新页面时，它仍然存在（值），当我关闭浏览器并再次打开时，值被重置。感谢您的帮助：）@iAmOren
window.onload=function() {
  if(localStorage.darkMode=="true") {
    document.body.classList.toggle('dark');
    document.getElementById("chk").checked=true;
  }
  else {
    document.body.classList.toggle('light');
  }
};
document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode=(localStorage.darkMode=="true")?"false":"true";
});