Javascript 基于localStorage布尔值在if条件下处理addEventListener

我正在尝试根据操作系统级别的亮/暗模式切换主题。用户可以在使用网站时更改系统设置。因此，我需要实时更新，而不是页面刷新。因此，我使用

addEventListener

获取系统当前的更改<代码>addEventListener工作正常。但是，如果System Settings（系统设置）选项设置为true，它应该可以工作

我在localStorage中将系统设置存储为布尔选项如果为真，则只有addEventListener可以工作。如果为false，则不应工作。但是，我的问题是addEventListener在这两种情况下都工作。我的意思是，如果系统设置既不正确也不错误，那么它就可以工作。如何处理addEventListener应基于本地存储值工作（如果系统设置为true）

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();
}

现在它起作用了

<div id="theme">
  Testing based on User OS level light/dark theme
</div>
<div class="option">
  <span id="sun" class="lightCls" onclick="setLight();">Light</span>
  <span id="moon" class="darkCls" onclick="setDark();">Dark</span>
  <span>
    <input type="checkbox" id="system" onclick="checkBox();" />
    <label for="system">System Setttings</label>
  </span>
</div>

<style>
* {
  margin: 0;
  padding: 0;
}
#theme {
  width: 100%;
  height: 100vh;
}
.default {
  background: #ddd;
  color: #000;
}
.dark {
  background: #101010;
  color: #fff;
}
.option {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  border: 1px solid #ccc;
  padding: 3px;
}
.lightCls, .darkCls {
  padding: 2px;
  cursor: pointer;
}
.lightCls {
  background: #ddd;
  color: #000;
}
.darkCls {
  background: #101010;
  color: #fff;
}
.addOpacity {
  opacity: 0.2;
  pointer-events: none;
}
</style>

<script>
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();
}

</script>

基于用户操作系统级明暗主题的测试
轻的
黑暗的
系统设置
* {
保证金：0；
填充：0；
}
#主题{
宽度：100%；
高度：100vh；
}
.违约{
背景：ddd；
颜色：#000；
}
.黑暗{
背景：#101010；
颜色：#fff；
}
.选择权{
位置：绝对位置；
右：0；
底部：0；
背景：#fff；
边框：1px实心#ccc；
填充：3倍；
}
.lightCls、.darkCls{
填充：2px；
光标：指针；
}
.lightCls{
背景：ddd；
颜色：#000；
}
darkCls先生{
背景：#101010；
颜色：#fff；
}
.addOpacity{
不透明度：0.2；
指针事件：无；
}
函数defaultFunction（）{
setItem（'option'，'default'）；
setItem（'systemOption'，false）；
}
defaultFunction（）；
函数myFunction（）{
让getOption=localStorage.getItem（'option'）；
让themeiv=document.getElementById（'theme'）；
if（localStorage.getItem（'systemOption'）=='true'）{
让osTheme=window.matchMedia（'（首选颜色方案：深色）'）；
osTheme.addEventListener（'change'，event=>{
if（event.matches）{
iv.类列表。添加（“黑色”）；
iv.classList.remove（“默认”）；
}否则{
iv.classList.add（“默认”）；
iv.类列表。删除（“黑色”）；
}
})
}否则{
如果（getOption='dark'）{
iv.类列表。添加（“黑色”）；
iv.classList.remove（“默认”）；
}else if（getOption=='default'）{
iv.classList.add（“默认”）；
iv.类列表。删除（“黑色”）；
}
}
}
myFunction（）；
函数setDark（）{
setItem（'option'，'dark'）；
myFunction（）；
}
函数setLight（）{
setItem（'option'，'default'）；
myFunction（）；
}
函数复选框（）{
设cBox=document.getElementById（'system'）；
让sun=document.getElementById（'sun'）；
让moon=document.getElementById（'moon'）；
如果（cBox.checked）{
setItem（'systemOption'，true）；
sun.classList.add（'addOpacity'）；
moon.classList.add（'addOpacity'）；
}否则{
setItem（'systemOption'，false）；
sun.classList.remove（'addOpacity'）；
moon.classList.remove（'addOpacity'）；
}
myFunction（）；
}

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

尝试有条件地添加/删除事件侦听器，如下所示

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");
        }
    }
});

---

您是否在JSFIDLE上尝试此代码？您是否测试了在更改系统设置时事件侦听器是否工作？@SomShekharMukherjee在本地文件和JSFIDLE中都进行了尝试。是的，我考过了。当我更改系统设置时，事件侦听器工作正常。