如何在页面刷新后保持用户勾选/取消勾选的Checkbox状态？（jQuery & localStorage）

首先咱们来看看你现有代码里的几个问题：

• 没有监听Checkbox的change事件：你现在只在页面初始化时判断了一次状态，但用户勾选/取消勾选后，没有把新状态同步到localStorage里，刷新自然就没保存
• 设置选中状态的写法错误：('#dtype').checked = localStorage.checked; 这里既缺了jQuery的$，而且jQuery对象不能直接用原生的.checked属性，得用.prop()方法
• localStorage存储的是字符串类型：你直接存true/false，实际会变成"true"/"false"，读取时需要转成布尔值，不然会出问题
• 没有处理初始默认值：如果用户第一次访问页面，localStorage.checked是undefined，这时候得给个默认状态

下面是修复后的完整代码，我会一步步解释：

$(function() {
  // 1. 获取存储的状态，处理默认值（如果没有存储过，默认不选中）
  const isChecked = localStorage.getItem('checked') === 'true';
  
  // 2. 页面加载时，把存储的状态赋值给Checkbox
  $('#dtype').prop('checked', isChecked);
  
  // 3. 监听Checkbox的change事件，状态变化时同步到localStorage
  $('#dtype').on('change', function() {
    const currentState = $(this).is(':checked');
    localStorage.setItem('checked', currentState.toString());
    
    // 这里放你原来的do something逻辑
    if (currentState) {
      // 当勾选时执行的代码
      console.log('Checkbox已勾选');
    } else {
      // 当取消勾选时执行的代码
      console.log('Checkbox已取消勾选');
    }
  });
  
  // 页面初始化时也执行一次do something逻辑（可选，根据你的需求）
  if (isChecked) {
    // 初始化时勾选状态的逻辑
    console.log('页面加载时Checkbox是勾选状态');
  } else {
    // 初始化时未勾选状态的逻辑
    console.log('页面加载时Checkbox是未勾选状态');
  }
});

关键改动说明： #

• 用localStorage.getItem()和setItem()来规范存取，避免直接赋值可能带来的类型问题
• 用.prop('checked', 状态)来设置jQuery对象的选中状态，这是jQuery推荐的写法
• 新增了change事件监听，确保用户操作Checkbox时，新状态能立刻保存到localStorage
• 处理了初始默认值，第一次访问时Checkbox默认是未选中的（你可以根据需求改成true）

这样修改后，不管用户勾选还是取消勾选，状态都会实时存在localStorage里，页面刷新后会自动读取并恢复状态啦。

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