Lưu lựa chọn chủ đề

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 17 trên 27.

Khi người dùng chuyển đổi giữa giao diện sáng và tối, chúng ta muốn trang web ghi nhớ lựa chọn của họ.
Để làm vậy, chúng ta dùng localStorage trong JavaScript. Nó lưu dữ liệu trong trình duyệt, và dữ liệu này vẫn còn sau khi tải lại trang hoặc đóng trình duyệt.

Lô-gic như sau:

Khi người dùng bật hoặc tắt giao diện, hãy lưu giao diện hiện tại vào localStorage.
Khi trang tải, hãy kiểm tra localStorage và tự động áp dụng giao diện đã lưu.

HTML:

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

CSS:

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

Đoạn code này kiểm tra xem người dùng đã lưu giao diện tối trong localStorage trước đó chưa và áp dụng giao diện đó khi trang tải.

Khi nhấn nút, chế độ tối trên trang sẽ bật hoặc tắt, sau đó cập nhật localStorage để ghi nhớ tùy chọn cho lần truy cập tiếp theo

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

// Áp dụng giao diện đã lưu khi tải trang
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

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

  // Lưu tùy chọn
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Điều này giúp lưu lại tùy chọn của người dùng giữa các lần truy cập trang web của bạn.

Thử thách

Dễ

Tạo nút chuyển đổi giao diện và ghi nhớ tùy chọn của người dùng.

Các bước:

Khi tải trang: Kiểm tra xem người dùng đã chọn giao diện tối trước đó chưa
1. Nếu giá trị "dark" được lưu trong localStorage, thêm lớp "dark-mode" vào phần thân trang
Khi nhấn nút chuyển đổi: Chuyển đổi giữa giao diện sáng và tối
1. Bật hoặc tắt lớp "dark-mode" trên phần tử body
2. Lưu giao diện hiện tại trong localStorage

Tự làm thử

<!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>