浏览器刷新后如何让页面列表数据保留并正常显示？

架构老林

2026-8-29

问题核心

你现有代码只实现了新增任务时写入本地存储的逻辑，缺少页面加载时读取缓存、重新渲染任务列表的关键步骤，刷新后页面自然会重置为空。另外代码里还有两个隐性bug会影响功能运行：一是没有声明STORAGE_KEY常量，写入存储时会直接报错；二是表单校验没加中断逻辑，用户漏填内容时依然会生成空任务插入列表。

修复步骤

第一步：初始化任务数组时优先读取本地缓存，不要固定初始化为空数组，同时提前声明存储用的Key常量
第二步：抽离通用的单任务渲染函数，不管是新增任务还是初始化加载缓存任务，都复用这套逻辑生成DOM，避免重复写HTML拼接代码
第三步：监听页面DOM加载完成事件，用forEach遍历缓存里的所有任务数据，逐个调用渲染函数插入到页面中
第四步：补全校验逻辑的中断判断，用户漏填内容时直接终止新增流程，不要生成无效任务
第五步：后续实现编辑、删除、标记完成功能时，操作完记得同步更新taskList数组、调用存储函数更新缓存，不然操作状态刷新后会丢失

参考修改代码

全局变量初始化修正

// 提前声明本地存储的Key，避免未定义报错
const STORAGE_KEY = 'user_task_list'
// 初始化时优先读本地缓存，无缓存时才用空数组
let taskList = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];

抽离通用单任务渲染函数

// 传入单个任务数据，返回生成好的任务DOM节点
const 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">${data.taskNew}</div>
        <label class="due-date">${data.taskDate}</label>
        <label class="due-time">${data.taskTime}</label>
      </div>
      <div class="action-buttons">
        <button onclick="editItem()" class="edit" data-id="${data.id}">编辑</button>
        <button onclick="deleteItem()" class="delete" data-id="${data.id}">删除</button>
        <button onclick="completeItem()" class="complete" data-id="${data.id}">完成</button>
      </div>
    </div>`;
  return taskItem
}

修正原有的新增任务函数

const creatTask = () => {
  const data = {
    id: createId(),
    taskNew: el.input.value.trim(),
    taskDate: el.date.value,
    taskTime: el.time.value,
  }
  // 校验不通过直接return，终止后续新增逻辑
  if (!data.taskNew) {
    alert("请输入任务内容");
    return
  }
  if (!data.taskDate) {
    alert("请选择任务截止日期");
    return
  }
  if (!data.taskTime) {
    alert("请选择任务截止时间");
    return
  }
  // 复用渲染函数生成DOM
  const taskDom = renderSingleTask(data)
  taskList.push(data);
  el.list.appendChild(taskDom);
  storeList();
  // 新增完成后清空输入框（可选优化）
  el.input.value = ''
  el.date.value = ''
  el.time.value = ''
};

新增页面初始化渲染逻辑（就是之前缺失的forEach遍历部分）

// 页面DOM加载完成后，把缓存里的任务全部渲染出来
document.addEventListener('DOMContentLoaded', () => {
  taskList.forEach(task => {
    const taskDom = renderSingleTask(task)
    el.list.appendChild(taskDom)
  })
})

// 原有存储函数不需要改动，只要保证STORAGE_KEY已声明即可
function storeList() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(taskList));
}

额外提示

你原代码里按钮容器的类名拼写错误，把action-buttons写成了atcion-buttons，如果CSS是按正确类名写的会导致样式失效，记得同步修正。

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