我的JS明暗切换按钮绑定的localStorage功能不生效是什么原因？

架构老林

2026-9-23

问题根本原因

localStorage 仅支持存储字符串类型的值，你存入的布尔值true/false会被自动转为字符串"true"/"false"。你当前代码直接判断if(storedValue)时，哪怕是存的"false"，也是非空字符串，会被判定为真值，永远走亮模式分支，这就是功能异常的核心原因。

修复方案

1. 修正stored()函数的判断逻辑

把取到的存储值转成布尔值再判断即可，修改后完整JS代码如下：

function stored() {
    // 把取出的字符串转成布尔值
    var storedValue = localStorage.getItem("server") === "true";
    if(storedValue){
      lightmode()
      document.getElementById("ID_HERE").checked = true;
    }else{
       darkmode()
       document.getElementById("ID_HERE").checked = false;
    }
  }


function toggle() {
    const input = document.getElementById("ID_HERE");
    if(input.checked) {
      lightmode()
    } else {
        darkmode()
    }
    // 合并重复的存值逻辑，减少代码冗余
    localStorage.setItem("server", input.checked);
}