保存主题选择

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 17 课，共 27 课。

当用户在浅色主题和深色主题之间切换时，我们希望网站记住他们的选择。
为此，我们在 JavaScript 中使用 localStorage。它会在浏览器中存储数据，即使刷新页面或关闭浏览器后，这些数据仍会保留。

逻辑如下：

用户切换主题时，将当前主题保存到 localStorage 中。
页面加载时，检查 localStorage 并自动应用已保存的主题。

HTML：

<button id="themeToggle">Toggle Theme</button>

CSS：

body.dark-mode {
  background-color: #222;
  color: #fff;
}

这段代码会检查用户之前是否在 localStorage 中保存了深色主题，并在页面加载时应用该主题。

点击按钮时，页面会切换深色模式，然后更新 localStorage，以便在下次访问时记住这一偏好

const button = document.getElementById("themeToggle");

// 页面加载时应用已保存的主题
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // 保存偏好设置
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

这样可以确保用户每次访问你的网站时，都保留其偏好设置。

挑战

简单

创建一个能够记住用户偏好的主题切换功能。

步骤：

页面加载时：检查用户之前是否选择了深色模式
1. 如果 localStorage 中保存的是 "dark"，就将 "dark-mode" 类添加到 body 上
点击切换按钮时：在浅色主题和深色主题之间切换
1. 切换 body 元素上的 "dark-mode" 类
2. 将当前主题保存到 localStorage 中

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>