如何实现浏览器刷新后页面任务列表不丢失

你现在的代码有4个核心问题导致刷新后任务丢失、渲染异常：

• 页面加载时没有主动读取localStorage里存的任务数据，刷新后全局变量taskList会被重置为空数组，也没有触发渲染逻辑，自然看不到之前存的内容
• 写的displayTasks函数变量引用全错：遍历的是未定义的tasks而不是入参taskList，循环里用的是外层不存在的data变量而不是当前遍历的任务项，而且函数只返回HTML字符串，既没拼全操作按钮的结构，也没把内容插入到页面DOM里
• creatTask里的表单校验只有弹窗提示，没有加return终止执行，就算用户没填全内容也会生成空任务插到列表里
• storeList函数里读localStorage的逻辑完全多余，存数据的时候不需要额外读一遍，读出来的值也没赋值给全局的taskList，等于白写

把你原来对应部分的代码替换成下面的内容即可：

const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  list: document.querySelector(".list"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time"),
};
//local storage key
const storage_key = "tasks-storage-key";

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

// 存储任务的全局数组
let taskList = [];

// 全量渲染任务列表
function renderAllTasks() {
  // 清空容器避免重复渲染
  el.list.innerHTML = '';
  taskList.forEach(task => {
    const tasks = document.createElement("div");
    tasks.innerHTML = `
       <div class="task-content">
        <div class="task" data-id="${task.id}">
        <div class="new-task-created">${task.taskNew}</div>
        <label class="due-date">${task.taskDate}</label>
        <label class="due-time">${task.taskTime}</label>
    </div>

    <div class="atcion-buttons">
        <button onclick="editItem()" class="edit" data-id="${task.id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${task.id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${task.id}">Complete</button>
    </div>
</div>`;
    el.list.appendChild(tasks);
  })
}

// 页面初始化：读取本地存储的任务
function initTasks() {
  taskList = JSON.parse(localStorage.getItem(storage_key)) || [];
  renderAllTasks();
}

// 新建带日期时间的任务
const creatTask = () => {
  const data = {
    id: createId(),
    taskNew: el.input.value.trim(),
    taskDate: el.date.value,
    taskTime: el.time.value,
  }

  if (!data.taskNew) {
    alert("Please add a new Task");
    return;
  }
  if (!data.taskDate) {
    alert("Please add a new Task with a due date");
    return;
  }
  if (!data.taskTime) {
    alert("Please add a new Task with a due time");
    return;
  }

  taskList.push(data);
  renderAllTasks();
  storeList();
  // 新增完成后清空输入框
  el.input.value = '';
  el.date.value = '';
  el.time.value = '';
};

// 新增按钮事件监听
function addTask() {
  creatTask();
}

// 存储任务列表
function storeList() {
  localStorage.setItem(storage_key, JSON.stringify(taskList));
}

// DOM加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initTasks);

原来写的存在变量错误的displayTasks函数可以直接删掉，已经用renderAllTasks替换了完整逻辑

• 新增页面初始化逻辑：DOM加载完成后立刻从localStorage拉取已存的任务，赋值给全局taskList后触发全量渲染，保证刷新后能读到之前存的数据
• 重写渲染逻辑：修复了原来变量引用错误的问题，补全了操作按钮的HTML结构，每次渲染前先清空列表容器，避免重复追加内容
• 补全表单校验的终止逻辑：输入不合法时直接return退出函数，不会生成空任务
• 简化存储逻辑：storeList只负责把当前内存里的任务列表序列化后存入localStorage，去掉了无效的读取操作
• 新增任务完成后自动清空输入框，优化使用体验

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