网站深色模式切换选择无法保存到localStorage问题求助

问题根因 #

你当前的代码只实现了「切换主题时将配置写入localStorage」的逻辑，缺少页面加载时主动读取localStorage存储的主题配置、并应用到页面和同步开关状态的步骤，所以刷新/跳转页面后配置会重置。
另外你代码里的console.log('checking local storage' + localStorage.getItem(localStorage))是错误写法，getItem的参数需要是字符串类型的键名，这里传入localStorage对象本身是无效的，可以直接删除这行日志。

改进后的完整JS代码 #

// 检测localStorage可用性
function localStorageSupported() {
  try {
    return "localStorage" in window && window["localStorage"] !== null;
  } catch (e) {
    return false;
  }
}

// 切换过渡动画
let trans = () => {
  document.documentElement.classList.add('transition');
  window.setTimeout(() => {
    document.documentElement.classList.remove('transition')
  }, 1000)
}

var checkbox = document.querySelector('input[name=theme]');

// 页面初始化：读取存储的主题并应用
if (localStorageSupported()) {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    // 应用主题到根元素
    document.documentElement.setAttribute('data-theme', savedTheme);
    // 同步开关状态：savedTheme为selected时开关是勾选状态
    checkbox.checked = savedTheme === 'selected';
  }
}

// 主题切换监听
checkbox.addEventListener('change', function() {
  if(this.checked) {
    trans()
    document.documentElement.setAttribute('data-theme', 'selected')
    localStorage.setItem('theme', 'selected')
  } else {
    trans()
    document.documentElement.setAttribute('data-theme', 'default')
    localStorage.setItem('theme', 'default')
  }
})

额外优化建议 #

• 为了避免页面加载时出现默认主题闪一下再切换到用户保存主题的问题，可以把「读取存储主题并设置给html根元素」的逻辑单独抽出来，放在HTML的<head>标签内执行，不要等待整个DOM加载完成再执行
• 确保你的JS代码是在开关DOM元素加载完成后执行的，推荐把script标签放在body标签的最末尾，或者把所有逻辑包裹在document.addEventListener('DOMContentLoaded', () => { 所有逻辑放这里 })回调里

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