JS onclick绑定的Local Storage异常：刷新后明暗模式与存储值不一致

问题根因 #

• LocalStorage仅支持存储字符串类型，你存入布尔值true/false时，会被自动转为字符串"true"/"false"。你原代码中直接用if (storedValue)做判断，即使取到的是字符串"false"，作为非空字符串也会被判定为真值，走错误的逻辑分支。
• 你定义的默认逻辑和HTML属性冲突：你说明暗模式对应checked=false（暗）/true（亮），但HTML里的checkbox默认加了checked属性，默认状态为true，和你要求的默认暗模式不符。
• 点击label内的元素会自动切换关联input的checked状态，你给span额外绑定onclick不会出错，但可以简化逻辑减少冗余。

修正后的代码 #

HTML代码 #

<body onload="stored()">
  <label for="ID_HERE" class="toggle-switchy">
    <!-- 去掉默认checked，符合默认暗模式对应checked=false的逻辑 -->
    <input type="checkbox" name="server" id="ID_HERE" />
    <span class="toggle" id="saveDarkLight"></span>
    <span class="switch"></span>
  </label>
</body>

JS代码 #

function stored() {
  const storedValue = localStorage.getItem("server");
  // 将字符串转为布尔值判断
  const isLightMode = storedValue === 'true';
  if (isLightMode) {
    lightmode()
    document.getElementById("ID_HERE").checked = true;
  } else {
    darkmode()
    document.getElementById("ID_HERE").checked = false;
  }
}

// 直接监听checkbox的change事件，不需要绑定span的click，避免逻辑冲突
document.getElementById("ID_HERE").addEventListener('change', function() {
  if (this.checked) {
    lightmode()
  } else {
    darkmode()
  }
  localStorage.setItem("server", this.checked);
})

function darkmode() {
  const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.background = '#0c0a0f';
  }
}

function lightmode() {
  const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.background = 'white';
  }
}

验证逻辑 #

1. 首次访问页面时，localStorage没有对应值，默认加载暗模式，checkbox未选中
2. 切换到亮模式后，localStorage存储"true"，页面背景变为白色
3. 刷新页面后，读取到"true"判定为亮模式，正确加载亮模式样式和checkbox选中状态

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