如何实现待办列表localStorage持久化及页面加载独立渲染

现有代码未实现localStorage读写逻辑，两个核心错误导致功能不符合预期：

1. 新增任务仅操作DOM，未同步持久化数据；之前用变量存储出现覆盖，是因为每次新增都将单个任务值直接赋值给变量，未将新任务追加到已有任务数组中
2. 数组读取后渲染异常，是因为未遍历数组逐个生成独立任务DOM，直接将全量数组内容塞入同一个容器导致

核心思路是所有任务操作（增/删/改/标记完成）都先更新统一的任务数组，再把数组序列化后存到localStorage，页面加载时先读localStorage里的数组，遍历逐个生成独立的任务元素，不要直接把DOM当数据源。

第一步：抽离公共逻辑 #

先写3个通用工具函数，避免重复编写逻辑：

// 从localStorage读取任务数组，无数据时返回空数组
function getTasks() {
  return JSON.parse(localStorage.getItem('todoTasks')) || []
}
// 将最新任务数组存入localStorage
function saveTasks(tasks) {
  localStorage.setItem('todoTasks', JSON.stringify(tasks))
}
// 单个任务的DOM生成+事件绑定逻辑，新增任务、页面初始化渲染都复用该逻辑
function createTaskElement(task) {
  const tasksName = document.createElement('div');
  tasksName.classList.add("tasks-div")
  // 给每个任务元素绑定对应任务id，方便删/改/标记时定位数组项
  tasksName.dataset.id = task.id;
        
  const taskText = document.createElement('p');
  taskText.innerText = task.content;
  taskText.classList.add("task");
        
  const del = document.createElement('button');
  del.classList.add("del");
  del.innerHTML = '<i class="fas fa-solid fa-trash"></i>';
    
  const edit = document.createElement('button');
  edit.classList.add("edit");
  edit.innerHTML = '<i class="fas fa-solid fa-pen-to-square"></i>';
    
  const save = document.createElement('button');
  save.classList.add("save");
  save.innerHTML = '<i class="fas fa-solid fa-floppy-disk"></i>';
  // 初始化按钮显示状态
  save.style.display = 'none';
  if(task.isCompleted) edit.style.display = 'none';

  const chkbox = document.createElement('input');
  chkbox.classList.add("chkbox")
  chkbox.type = "checkbox";
  chkbox.checked = task.isCompleted;
  // 初始化已完成任务样式
  if(task.isCompleted) {
    taskText.style.textDecoration = "line-through red";
  }

  tasksName.appendChild(chkbox);
  tasksName.appendChild(taskText);
  tasksName.appendChild(del);
  tasksName.appendChild(edit);
  tasksName.appendChild(save);

  // 标记完成/未完成逻辑
  chkbox.addEventListener('click' , function(){
    const currentTasks = getTasks();
    const targetIndex = currentTasks.findIndex(item => item.id === task.id);
    currentTasks[targetIndex].isCompleted = chkbox.checked;
    saveTasks(currentTasks);
    if(chkbox.checked){
      taskText.style.textDecoration = "line-through red";
      edit.style.display = "none";
      save.style.display = "none";
    } else {
      taskText.style.textDecoration = "none";
      edit.style.display = "block";
    }
  })

  // 删除任务逻辑
  del.addEventListener('click' , function(){
    const currentTasks = getTasks();
    const newTasks = currentTasks.filter(item => item.id !== task.id);
    saveTasks(newTasks);
    tasksDiv.removeChild(tasksName);
  })
        
  // 进入编辑状态逻辑
  edit.addEventListener('click' , function(){
    taskText.contentEditable = true;
    taskText.focus();
    edit.style.display = "none";
    save.style.display = "block";
  })

  // 保存编辑逻辑
  save.addEventListener('click' , function(){
    if(taskText.innerText.trim() === ''){
      alert('任务内容不能为空，将删除该任务');
      const currentTasks = getTasks();
      const newTasks = currentTasks.filter(item => item.id !== task.id);
      saveTasks(newTasks);
      tasksDiv.removeChild(tasksName);
      return
    }
    const currentTasks = getTasks();
    const targetIndex = currentTasks.findIndex(item => item.id === task.id);
    currentTasks[targetIndex].content = taskText.innerText;
    saveTasks(currentTasks);
    taskText.contentEditable = false;
    taskText.blur();
    edit.style.display = "block";
    save.style.display = "none";
  })

  return tasksName
}

第二步：修正原有新增任务逻辑 #

原onclickBtn函数不要直接拼接DOM，先更新任务数组再渲染：

function onclickBtn(){
  const inputVal = input.value.trim();
  if(inputVal.length === 0 || inputVal === "What do you have planned?"){
    alert("请输入任务内容");
    return
  }
  // 生成新任务对象，用时间戳作为唯一id
  const newTask = {
    id: Date.now(),
    content: inputVal,
    isCompleted: false,
  }
  // 读取现有任务、追加新任务、持久化存储
  const tasks = getTasks();
  tasks.push(newTask);
  saveTasks(tasks);
  // 生成DOM插入页面
  const taskEl = createTaskElement(newTask);
  tasksDiv.appendChild(taskEl);
  // 清空输入框
  input.value = "";
}

第三步：添加页面初始化渲染逻辑 #

页面加载完成后读取localStorage任务，遍历逐个生成DOM，避免所有任务塞入同一个容器：

document.addEventListener('DOMContentLoaded', () => {
  const tasks = getTasks();
  // 遍历数组，每个任务单独生成独立DOM元素追加
  tasks.forEach(task => {
    const taskEl = createTaskElement(task);
    tasksDiv.appendChild(taskEl);
  })
})

第四步：补全缺失的元素获取 #

原代码使用了addBtn但未做DOM获取，在JS最顶部补上：

const addBtn = document.getElementById('add-btn');

原代码中定义的oldTasksDiv全程未使用，可直接删除。

• localStorage仅支持存储字符串，存数组/对象时必须用JSON.stringify()转成字符串，读取时用JSON.parse()转回JS可操作的对象
• 始终将localStorage中存储的任务数组作为唯一数据源，所有操作先更新数组存入localStorage，再同步更新DOM，不要仅操作DOM不做持久化
• 每个任务必须绑定唯一id，删/改/标记状态时才能精准定位数组对应项，避免操作错误
• 渲染任务时必须遍历数组，一个任务对应生成一个独立容器元素，不要直接将全量数组内容塞入单个容器
• 原代码中tasksName.classList.add("tasks-div")存在引号不配对的语法错误，修正后的代码已修复该问题

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