如何在页面刷新后保留动态添加复选框的样式？

看起来你已经搞定了任务数据的存储，但问题出在渲染任务的时候没有把localStorage里的completed状态同步到DOM的复选框上——你的CSS样式是依赖复选框的:checked伪类的，所以只要让DOM里的复选框checked属性和数据中的completed值对应，刷新后样式自然就会保留。

下面是具体的修改步骤：

1. 渲染时动态设置复选框的checked属性 #

修改你的renderTask函数里的复选框HTML模板，根据每个任务的completed状态决定是否添加checked属性：

function renderTask(tasks) {
  list.innerHTML = "";
  tasks.forEach((item) => {
    const newTask = document.createElement("li");
    newTask.setAttribute("data-key", item.id);
    // 关键修改：根据item.completed动态添加checked属性
    newTask.innerHTML = `
      <label class="tasks__item">
        <input type="checkbox" class="checkbox" name="task" ${item.completed ? 'checked' : ''}>
        <span>${item.name}</span>
      </label>
      <img class="delete" src="img/icons/delete.svg" alt="del" width="18px" height="20px">`;
    list.append(newTask);
  });
}

这样渲染的时候，已完成的任务对应的复选框会自动带上checked属性，你的CSS就会触发选中样式。

2. 监听复选框点击，同步更新数据并保存到localStorage #

你还需要处理用户点击复选框的事件，把状态变化同步到tasks数组，再存回localStorage（否则点击后的状态刷新后会丢失）。因为是动态生成的元素，推荐用事件委托来监听：

// 在页面初始化时添加事件委托
document.addEventListener('DOMContentLoaded', () => {
  // 处理复选框点击
  list.addEventListener('change', (e) => {
    if (e.target.classList.contains('checkbox')) {
      // 获取对应任务的ID
      const taskId = parseInt(e.target.closest('li').dataset.key);
      // 找到数组中对应的任务
      const targetTask = tasks.find(task => task.id === taskId);
      if (targetTask) {
        // 切换完成状态
        targetTask.completed = !targetTask.completed;
        // 保存到localStorage
        addToStorage(tasks);
        // 可选：如果不想重新渲染整个列表，也可以手动更新样式，但重新渲染更简单
        // renderTask(tasks);
      }
    }
  });

  // 页面加载时从localStorage读取任务并渲染
  const storedTasks = localStorage.getItem('tasks');
  if (storedTasks) {
    tasks = JSON.parse(storedTasks);
    renderTask(tasks);
    // 更新任务数量显示
    amount.textContent = tasks.length === 1 ? `${tasks.length} Task` : `${tasks.length} Tasks`;
  }
});

3. 确认addToStorage函数的正确性 #

确保你的addToStorage函数是把数组转成JSON字符串存储的（如果还没写的话）：

function addToStorage(tasks) {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

为什么之前的方法无效？ #

你的CSS样式是基于复选框的:checked伪类来触发的，而:checked伪类的状态完全依赖DOM中复选框的checked属性。之前你渲染的时候不管任务的completed状态，都生成未选中的复选框，所以即使localStorage里存了正确的completed值，DOM也没有同步，自然不会显示选中样式。

只要把数据和DOM的状态对应起来，问题就解决啦！

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