HTML 使用 JavaScript 的本地存储暗模式

Question

我试图为我的网站制作一个完整的黑暗模式。快完成了，但我有一个问题。当我重新加载页面时，暗模式会恢复为默认的亮模式。我该如何解决这个问题？我尝试了一些代码，但没有用。我想使用本地存储，但我不知道如何将它添加到我的代码中。有人可以帮我弄这个吗？这是我的示例代码：

function darkmode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
}

<html>
<head>
<style>
.card {
  background-color: red;
  color: green;
}
.dark-mode .card {
  background-color: black;
  color: white;
}


</style>
</head>
<body>
<button onclick="darkmode()">DARK MODE</button>
<div class="card">
  <h2>Title</h2>
  <div class="fkimg" style="height: 100px; width: 20%;">IMAGE</div>
  <a>Some text</a>
</div>

</body>
</html>

Answer 1

对于您的示例代码，最好的方法似乎是向 darkmode 函数添加一些内容：

function darkmode() {
  // all values retrieved from localStorage will be strings
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
}

function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

<html>
<head>...</head>
<body onload="onload()">
  ...
</body>
</html>

MDN 本地存储参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

HTML 使用 JavaScript 的本地存储暗模式

HTML Local Storage Dark Mode Using JavaScript

html

javascript

linux

local-storage

darkmode