如何为W3School明暗模式切换功能保存Cookie，刷新后保留用户主题设置？

通过浏览器内置的localStorage本地持久化存储能力，记录用户选择的主题状态，页面每次加载时优先读取存储的配置应用主题，即可避免刷新后配置丢失。

1. 初始化主题逻辑 #

页面DOM加载完成后，优先读取本地存储的主题配置，直接应用到页面：

document.addEventListener("DOMContentLoaded", () => {
  // 读取存储的主题
  const savedTheme = localStorage.getItem("user-theme");
  const themeToggle = document.querySelector("#darkmode-toggle");

  if (savedTheme === "dark") {
    document.body.classList.add("dark-mode");
    // 同步切换按钮的选中状态（如果用的是复选框按钮）
    themeToggle.checked = true;
  }
})

2. 修改主题切换逻辑 #

每次用户触发主题切换时，同步将最新状态存入localStorage：

const themeToggle = document.querySelector("#darkmode-toggle");

themeToggle.addEventListener("change", () => {
  // 切换body的深色模式类
  const isDarkMode = document.body.classList.toggle("dark-mode");
  // 存储最新主题状态
  localStorage.setItem("user-theme", isDarkMode ? "dark" : "light");
})

• localStorage属于浏览器本地持久化存储，只要用户不主动清理站点数据，配置会永久保留，刷新页面、关闭浏览器再重新打开都不会失效
• 如果需要适配系统默认主题偏好，没有存储的用户配置时，可以通过window.matchMedia("(prefers-color-scheme: dark)").matches判断系统当前的明暗模式，自动匹配默认主题
• 不要使用sessionStorage存储主题配置，该存储会在用户关闭标签页后自动清空，无法长期保留用户设置

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