如何修复自动主题切换复选框无法修改及页面重载状态恢复问题？

我来帮你搞定这两个问题，先梳理下代码里的几个关键问题，再给出具体的修复方案：

问题分析与修复步骤 #

1. 复选框状态赋值错误 #

你在TimeSch函数里给checked属性赋值的是字符串'true'和'false'，但DOM元素的checked属性是布尔类型——直接用布尔值true/false才对，字符串'false'在JavaScript里会被判定为真值，这就导致复选框始终处于选中状态，看起来像是没变化。

2. localStorage的键名格式错误 #

你的Set函数存储时给键名加了额外的单引号（"'" + name + "'"），读取的时候也用了localStorage.getItem("'TimeSch'")，这会让存储的键名变成'TimeSch'（带单引号），不仅不规范，还容易造成读取混乱，应该直接用键名本身，去掉多余的单引号。

3. 初始读取localStorage时未转换类型 #

localStorage里存的所有值都是字符串类型，哪怕你存的是false，读出来也是字符串"false"。直接把这个字符串传给TimeSch函数的话，if(a)会把非空字符串判定为true，逻辑就错了，得把读取到的字符串转成布尔值。

4. 复选框点击事件的状态同步 #

虽然你说触发函数没问题，但最好给复选框绑定change事件，直接用当前的checked状态调用TimeSch，确保状态同步更可靠。

修正后的完整代码 #

// 页面初始化时读取localStorage并恢复状态
const savedState = localStorage.getItem('TimeSch');
// 转换为布尔值：存储的是'true'则为true，否则为false（包括未存储的null情况）
TimeSch(savedState === 'true');

function TimeSch(isEnabled) {
  const checkbox = document.getElementById('TimeSch');
  // 直接赋值布尔值给checked属性
  checkbox.checked = isEnabled;
  
  if (isEnabled) {
    console.log('True start');
    Set('TimeSch', true);
    $('#theme').prop('disabled', true);
    const hours = new Date().getHours();
    const isDayTime = hours > 6 && hours < 20;
    theme(isDayTime ? 'White' : 'Dark');
    console.log(isDayTime ? 'Auto White' : 'Auto Dark');
  } else {
    console.log('False start');
    $('#theme').prop('disabled', false);
    Set('TimeSch', false);
  }
}

function Set(name, value) {
  if (typeof Storage !== "undefined") {
    // 去掉键名的单引号，直接存储
    localStorage.setItem(name, value);
  } else {
    console.log('No localStorage supported. Oh, please change your browser!');
  }
}

// 给复选框绑定change事件，同步状态
document.getElementById('TimeSch').addEventListener('change', function() {
  TimeSch(this.checked);
});

关键修复点说明 #

1. 布尔值正确赋值：checkbox.checked = isEnabled直接使用布尔值，确保复选框状态能正确切换。
2. 规范localStorage键名：去掉了键名的单引号，存储和读取都用'TimeSch'作为键名，避免不必要的字符串解析。
3. 初始状态转换：savedState === 'true'把localStorage读取到的字符串转换为布尔值，保证页面初始化时状态正确。
4. 绑定change事件：通过change事件监听复选框的状态变化，直接把当前的checked状态传入TimeSch函数，让状态同步更稳定。

这样修改后，复选框就能正常切换状态，而且页面重载时会自动从localStorage读取之前的设置恢复状态啦。

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