如何将动态生成的选中复选框附加到本地存储中的项目列表中

// 创建一个空数组来存储选中的项目列表
let selectedItems = [];

// 监听复选框的状态变化事件
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 获取当前选中的复选框的值或标识符
    const itemValue = this.value;

    // 判断当前复选框是否被选中
    if (this.checked) {
      // 将选中的项目添加到selectedItems数组中
      selectedItems.push(itemValue);
    } else {
      // 从selectedItems数组中移除取消选中的项目
      const index = selectedItems.indexOf(itemValue);
      if (index > -1) {
        selectedItems.splice(index, 1);
      }
    }

    // 将selectedItems数组存储到本地存储中
    localStorage.setItem('selectedItems', JSON.stringify(selectedItems));
  });
});

// 当页面重新加载时，可以通过localStorage获取选中的项目列表
window.addEventListener('load', function() {
  const storedItems = localStorage.getItem('selectedItems');
  if (storedItems) {
    selectedItems = JSON.parse(storedItems);
    // 在页面加载完成后，可以根据selectedItems数组的值来更新复选框的选中状态
    selectedItems.forEach(itemValue => {
      const checkbox = document.querySelector(`input[value="${itemValue}"]`);
      if (checkbox) {
        checkbox.checked = true;
      }
    });
  }
});