JS待办应用localStorage存数正常 刷新后任务列表不显示问题

核心问题 #

1. 缺少页面初始化渲染逻辑：代码仅在点击添加按钮时才会往页面插入任务DOM，页面加载时虽然从localStorage读取了已存任务数据到taskList变量，但没有遍历数据渲染到页面上，所以刷新后列表为空。
2. 函数职责耦合：原display函数同时承担新建任务数据、更新存储、插入DOM多个职责，无法复用给初始化渲染场景。
3. 删除逻辑存在bug：原删除函数只会删除页面第一个任务，且直接清空整个localStorage存储，而非删除对应id的单个任务。

修复后完整JavaScript代码 #

//local storage key
const STORAGE_KEY = "tasks-storage-key";

// variables object
const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  list: document.querySelector(".list"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time"),
};

//Create ID
const createId = () =>
  `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;

// 从本地存储读取已有任务
let taskList = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? "[]");

function makeNewTask() {
  const data = {
    id: createId(),
    taskNew: el.input.value,
    taskDate: el.date.value,
    taskTime: el.time.value,
    completed: false // 存储任务完成状态
  };
  return data;
}

// 抽离单个任务渲染函数，新增、初始化场景可复用
function renderSingleTask(data) {
  const taskItem = document.createElement("div");
  taskItem.innerHTML = `
         <div class="task-content">
          <div class="task" data-id="${data.id}">
          <div class="new-task-created" style="${data.completed ? 'text-decoration: line-through;' : ''}">${data.taskNew}</div>
          <label class="due-date" style="${data.completed ? 'text-decoration: line-through;' : ''}">${data.taskDate}</label>
          <label class="due-time" style="${data.completed ? 'text-decoration: line-through;' : ''}">${data.taskTime}</label>
      </div>
  
      <div class="action-buttons">
          <button onclick="editItem(event)" class="edit" data-id="${data.id}">Edit</button>
          <button onclick="deleteItem(event)" class="delete" data-id="${data.id}">Delete</button>
          <button onclick="completeItem(event)" class="complete" data-id="${data.id}">Complete</button>
      </div>
  </div>`;
  el.list.appendChild(taskItem);
}

// 页面初始化：遍历已有任务渲染
function init() {
  taskList.forEach(task => renderSingleTask(task));
}

// 新增任务逻辑
function addTask() {
  // 输入为空直接返回，避免存空任务
  if (!el.input.value.trim()) return
  const newTask = makeNewTask();
  taskList.push(newTask);
  renderSingleTask(newTask);
  storeList();
  // 添加完成后清空输入框
  el.input.value = ''
  el.date.value = ''
  el.time.value = ''
}

// 存储任务列表到本地
function storeList() {
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(taskList));
}

// 修复删除逻辑
function deleteItem(event) {
  const taskId = event.target.dataset.id;
  // 从数组中过滤掉要删除的任务
  taskList = taskList.filter(task => task.id !== taskId);
  // 删除对应DOM节点
  const taskElement = event.target.closest(".task-content");
  taskElement.remove();
  // 更新本地存储，不直接清空整个存储
  storeList();
}

function editItem() {}

// 修复完成逻辑，同步更新存储状态
function completeItem(event) {
  const taskId = event.target.dataset.id;
  const element = event.target.closest(".task-content");
  let taskItem = element.querySelector(".new-task-created");
  let dateItem = element.querySelector(".due-date");
  let timeItem = element.querySelector(".due-time");
  // 切换划线样式
  [taskItem, dateItem, timeItem].forEach(item => {
    item.style.textDecoration = item.style.textDecoration === 'line-through' ? 'none' : 'line-through'
  })
  // 更新任务完成状态持久化
  const targetTask = taskList.find(task => task.id === taskId);
  targetTask.completed = !targetTask.completed;
  storeList();
}

// 页面DOM加载完成后执行初始化渲染
window.addEventListener('DOMContentLoaded', init)

改动说明 #

• 新增公共渲染函数renderSingleTask，统一单任务DOM拼接逻辑，新增任务、页面初始化都可以直接调用
• 新增init初始化函数，页面加载完成后自动遍历本地存储的任务列表，逐个渲染到页面，解决刷新后列表为空的问题
• 修复删除逻辑：通过按钮上绑定的data-id定位要删除的任务，仅从数组中移除对应项后更新存储，不再清空整个本地存储
• 补全完成状态持久化，刷新后任务的完成划线状态不会丢失
• 新增空输入拦截、添加任务后清空输入框的基础体验优化

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