如何将主题切换JS代码的状态存入localStorage？

要把主题状态持久化到localStorage，只需要在切换主题时保存当前状态，并在页面加载时优先读取已保存的状态即可。以下是修改后的完整代码：

const sun = 'sun';
const moon = 'moon';
const toggleSwitch = document.querySelector('#darkmodeToggle');

function switchTheme(e) {
  let currentTheme = document.documentElement.getAttribute('data-theme');
  let newTheme;
  let newIcon;

  if (currentTheme === 'light') {
    newTheme = 'dark';
    newIcon = sun;
  } else {
    newTheme = 'light';
    newIcon = moon;
  }

  // 更新页面主题
  document.documentElement.setAttribute('data-theme', newTheme);
  this.innerHTML = newIcon;
  // 将主题状态存入localStorage
  localStorage.setItem('preferredTheme', newTheme);
}

toggleSwitch.addEventListener('click', switchTheme, false);

// 页面初始化时优先读取localStorage的主题设置
const savedTheme = localStorage.getItem('preferredTheme');
if (savedTheme) {
  // 应用保存的主题
  document.documentElement.setAttribute('data-theme', savedTheme);
  // 对应更新切换按钮的图标
  toggleSwitch.innerHTML = savedTheme === 'light' ? moon : sun;
} else {
  // 没有保存的主题时，遵循系统偏好设置
  if (window.matchMedia('(prefers-color-scheme: light)').matches) {
    document.documentElement.setAttribute('data-theme', 'light');
    toggleSwitch.innerHTML = moon;
  } else {
    // 补充系统偏好暗黑模式的默认逻辑
    document.documentElement.setAttribute('data-theme', 'dark');
    toggleSwitch.innerHTML = sun;
  }
}

关键修改说明： #

• 切换时存储状态：在switchTheme函数末尾添加localStorage.setItem('preferredTheme', newTheme)，每次切换主题都把当前主题保存到本地存储；
• 初始化优先读取缓存：页面加载时先检查localStorage.getItem('preferredTheme')，如果存在直接应用该主题并同步按钮图标；
• 完善系统偏好处理：补充了系统偏好暗黑模式的默认逻辑，避免主题状态缺失。

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