个人Todo应用LocalStorage功能异常求助

核心问题排查及修复方案 #

1. 修正LocalStorage初始化逻辑 #

页面加载时必须确保正确读取存储内容，若不存在则初始化空数组，同时处理可能的JSON解析错误：

// 替换原29-45行的注释代码，重新实现加载逻辑
document.addEventListener('DOMContentLoaded', function() {
  let tasks = [];
  // 读取并解析LocalStorage数据，捕获解析异常
  try {
    const savedTasks = localStorage.getItem('todoTasks');
    if (savedTasks) {
      tasks = JSON.parse(savedTasks);
    }
  } catch (err) {
    console.error('读取存储任务失败:', err);
    localStorage.removeItem('todoTasks'); // 清除损坏的无效数据
  }

  // 遍历任务数组，逐个渲染到页面
  tasks.forEach(task => {
    // 这里调用你的任务渲染函数，比如：renderSingleTask(task)
    // 示例渲染逻辑（根据你的实际DOM结构调整）
    const taskItem = document.createElement('div');
    taskItem.className = task.completed ? 'task completed' : 'task';
    taskItem.textContent = task.content;
    document.getElementById('todo-container').appendChild(taskItem);
  });
});

2. 确认保存逻辑格式正确性 #

检查第74行的保存代码，必须将数组转为JSON字符串存储，否则读取时会解析失败：

// 正确的保存逻辑示例
function saveTasksToLocal(tasks) {
  localStorage.setItem('todoTasks', JSON.stringify(tasks));
}

如果直接存储数组对象而非JSON字符串，JSON.parse会抛出异常，导致加载逻辑静默失效。

3. 验证渲染函数有效性 #

确保单个任务的渲染函数能正常生成DOM元素并挂载到页面：

// 示例渲染函数（需匹配你的页面结构）
function renderSingleTask(task) {
  const taskList = document.getElementById('todo-list');
  if (!taskList) return; // 防止DOM元素未找到导致报错

  const taskItem = document.createElement('li');
  taskItem.innerHTML = `
    <span>${task.content}</span>
    <button class="delete-btn">删除</button>
  `;
  if (task.completed) taskItem.classList.add('done');
  taskList.appendChild(taskItem);
}

4. 调试方法 #

• 在浏览器控制台执行localStorage.getItem('todoTasks')，查看存储内容是否为有效JSON；
• 在加载逻辑中添加console.log(tasks)，确认读取到的数组是否符合预期；
• 检查DOM选择器（如getElementById('todo-list')）是否与页面元素ID完全匹配。

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