Question

我正在尝试为我的网站创建暗模式，并且我使用以下代码，问题是暗模式在刷新页面或打开新页面时关闭。我认为javascript中有一个名为localstorage的功能。如果有人知道，请删除该问题的解决方法

<style>
body {background-color: white}
body.dark {background-color: black}
button {background-color: white; color: black}
body.dark button {background-color: black; color: white}
</style>
<script>
function toggleDark() {
  const body = document.querySelector('body');
  if (body.classList.contains('dark')) {
    body.classList.remove('dark');
  } else {
    body.classList.add('dark');
  }
}

document.querySelector('#darkmode').addEventListener('click', toggleDark);
</script>
<button id="darkbutton" class="darkmode" onclick="toggleDark();myFunction()">Toggle dark mode</button>

Answer 1

将数据放入javascript的cookie或本地存储中，因此，当刷新页面时，您可以获取该值。您可以访问本地存储，例如。

localStorage.setItem("mode", "dark");

您可以获得类似的数据

localStorage.getItem("mode");

现在您还可以在刷新页面后获得自己的模式。

Answer 2

之所以不起作用，是因为您没有以任何方式“保存”用户的选择，因此每次页面加载时都会将其重置为“亮模式”。

要解决此问题，您可以将数据放入localStorage（可以保存数据的地方）中，也可以通过JavaScript放入Cookie中。这样，刷新页面时，您可以访问该值并为文档设置它。

localStorage通常被使用，因为与cookie相比，它更容易与JavaScript一起使用。

下面的代码将使用setItem函数将键“ theme”设置为“ dark”，并使用getItem函数将其获取。

localStorage.setItem("theme", "dark");
localStorage.getItem("theme");

有关localStorage的更多信息，请see this MDN article.

我已经更新了您的代码段，以使其可以在下面使用：


<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body {background-color: white}
    body.dark {background-color: black}
    button {background-color: white; color: black}
    body.dark button {background-color: black; color: white}
  </style>
</head>
<body>
<button id="darkbutton" class="darkmode">Turn on dark mode</button>
<script>

const body = document.querySelector('body');
const button = document.querySelector('#darkbutton');
function toggleDark() {
  if (body.classList.contains('dark')) {
    body.classList.remove('dark');
    localStorage.setItem("theme", "light");
    button.innerHTML = "Turn on dark mode";
  } else {
    body.classList.add('dark');
    localStorage.setItem("theme", "dark");
    button.innerHTML = "Turn off dark mode";
  }
}

if (localStorage.getItem("theme") === "dark") {
  body.classList.add('dark');
  button.innerHTML = "Turn off dark mode";
}

document.querySelector('#darkbutton').addEventListener('click', toggleDark);
</script>
</body>
</html>

刷新页面时关闭暗模式

2 个答案: