javascript - 根据 localStorage bool 值在 if 条件下处理 addEventListener

Question

我正在尝试根据操作系统级别的亮/暗模式切换主题。用户在使用网站时可能会更改系统设置。所以，我需要实时更新而不是页面刷新。所以，我正在使用 addEventListener 来获取系统当前的变化。 addEventListener 工作正常。但是，如果系统设置选项设置为 true，它应该可以工作。

我已将系统设置作为 bool 选项存储在 localStorage 中。 如果为真，那么唯一的 addEventListener 应该起作用。如果它是假的，它应该不起作用。但是，我的问题是 addEventListener 在这两种情况下都有效。我的意思是，如果系统设置既不是 true 也不是 false，它就可以工作。我如何处理 addEventListener 应该基于 localStorage 值工作(如果系统设置设置为真)？

JsFiddle

JS

function defaultFunction() {
    localStorage.setItem('option', 'default');
  localStorage.setItem('systemOption', false);
}
defaultFunction();

function myFunction() {
  let getOption = localStorage.getItem('option');
  let themeDiv = document.getElementById('theme');
  
  if(localStorage.getItem('systemOption') == 'true') {
    let osTheme = window.matchMedia('(prefers-color-scheme: dark)');
    osTheme.addEventListener('change', event => {
      if(event.matches) {
        themeDiv.classList.add("dark");
        themeDiv.classList.remove("default");
      } else {
        themeDiv.classList.add("default");
        themeDiv.classList.remove("dark");
      }
    })
  } else {
    if(getOption == 'dark') {
      themeDiv.classList.add("dark");
      themeDiv.classList.remove("default");
    } else if(getOption == 'default') {
      themeDiv.classList.add("default");
      themeDiv.classList.remove("dark");
    }
  }
}
myFunction();

function setDark() {
    localStorage.setItem('option', 'dark');
  myFunction();
}

function setLight() {
    localStorage.setItem('option', 'default');
  myFunction();
}

function checkBox() {
    let cBox = document.getElementById('system');
  let sun = document.getElementById('sun');
  let moon = document.getElementById('moon');
  
  if(cBox.checked) {
    localStorage.setItem('systemOption', true);
    sun.classList.add('addOpacity');
    moon.classList.add('addOpacity');
  } else {
    localStorage.setItem('systemOption', false);
    sun.classList.remove('addOpacity');
    moon.classList.remove('addOpacity');
  }
  myFunction();
}

Answer 1

我认为问题在于您正在添加一个事件监听器，但您从未将其删除，因此它始终在监听该事件。

尝试像下面这样有条​​件地添加/删除事件监听器

function changeListener(event) {
  if(event.matches) {
    themeDiv.classList.add("dark");
    themeDiv.classList.remove("default");
  } else {
    themeDiv.classList.add("default");
    themeDiv.classList.remove("dark");
  }
}


let osTheme = window.matchMedia('(prefers-color-scheme: dark)');
if(localStorage.getItem('systemOption') === 'true') {
    osTheme.addEventListener('change', changeListener);
} else {
    osTheme.removeEventListener('change', changeListener);
}

或

始终监听事件并通过检查 localStorage 有条件地应用主题

const osTheme = window.matchMedia('(prefers-color-scheme: dark)');
osTheme.addEventListener('change', event => {
    if(localStorage.getItem('systemOption') === 'true') {
        if(event.matches) {
            themeDiv.classList.add("dark");
            themeDiv.classList.remove("default");
        } else {
            themeDiv.classList.add("default");
            themeDiv.classList.remove("dark");
        }
    }
});