如何利用Local Storage实现页面间深色模式状态记忆

当前代码仅在浏览器内存中切换body的dark-mode类，页面跳转或刷新后内存状态会丢失，要实现状态持久化，需要用localStorage存储深色模式的开启状态，页面加载时再读取并应用。

修改后的完整代码： #

<img onclick="darkmode()" id="darktoggledesktop" src="media/darktoggle.svg" alt="切换深色模式">
<script>
function darkmode() {
  const element = document.body;
  element.classList.toggle("dark-mode");
  // 将当前深色模式状态存入本地存储
  localStorage.setItem("darkMode", element.classList.contains("dark-mode"));
}

// 页面加载完成后，读取本地存储的状态并应用
document.addEventListener('DOMContentLoaded', function() {
  const isDarkModeEnabled = localStorage.getItem("darkMode") === "true";
  if (isDarkModeEnabled) {
    document.body.classList.add("dark-mode");
  }
});
</script>
<script>
function menufunction() {
  var x = document.getElementById("mobilemenuopen");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

关键改动说明： #

• 切换深色模式时，通过localStorage.setItem把当前状态（布尔值转成字符串）存在本地，确保页面关闭后数据不会丢失
• 监听DOMContentLoaded事件，页面加载完成后读取本地存储的darkMode值，判断是否需要给body添加dark-mode类，实现状态自动恢复

CSS部分无需修改，保持原有样式即可：

.dark-mode {
    background-color: black;
    color: white;
    transition: 0.4s;
}

内容的提问来源于stack exchange，提问作者EliasG