动态生成的复选框页面刷新后无法保持勾选状态，存储ID无法设置属性与样式

你的代码存在以下几处逻辑问题：

• 恢复选中状态的逻辑没有等待动态生成的复选框DOM渲染完成就执行，导致选择器找不到对应元素
• 直接把ID数组toString()传入选择器后，只设置了复选框的选中属性，没有同步修改心形图标的颜色
• 取消选中复选框时没有同步移除存储数组里的对应ID，且页面加载时没有把存储的选中列表赋值给全局的checked数组，会导致存储数据错误

修正后的jQuery代码 #

// 等待DOM完全加载后再执行恢复逻辑
$(function() {
  // 初始化选中数组，优先从sessionStorage读取
  var checked = sessionStorage.getItem('checkedList') ? 
    $.parseJSON(sessionStorage.getItem('checkedList')) : [];

  // 恢复选中状态和图标颜色
  if (checked.length > 0) {
    // 遍历每个存储的ID单独处理
    checked.forEach(function(id) {
      const $checkbox = $(id);
      $checkbox.prop('checked', true);
      // 同步修改对应心形图标颜色
      $checkbox.next('.fav-icon-label').css('color','#f7b731');
    });
  }

  // 复选框状态变更事件
  $(document).on('change','.fav-icon-checkbox',function(){
    const $this = $(this);
    const currentId = '#' + $this.attr('id');
    const $target = $this.next('.fav-icon-label');
    if($this.is(':checked')) {
      $target.css('color','#f7b731');
      // 避免重复添加相同ID
      if (!checked.includes(currentId)) {
        checked.push(currentId);
      }
    } else {
      $target.css('color','#9d9e9e');
      // 取消选中时从数组中移除对应ID
      checked = checked.filter(function(id) {
        return id !== currentId;
      });
    }
    // 每次状态变更都更新sessionStorage
    sessionStorage.setItem('checkedList', JSON.stringify(checked));
  });
})

上述修改已经覆盖了需求：页面刷新后会自动恢复复选框的选中状态，同时同步修改心形图标的颜色，且取消选中的逻辑会同步更新存储的选中列表，不会出现冗余错误数据。

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