构建与持久化待办事项列表：HTML、JavaScript实现及常见UI问题解析

admin 百科 2025-12-14 11

本教程详细指导如何使用html和javascript构建一个交互式的待办事项列表。内容涵盖了基础的任务添加逻辑，澄清了输入框文本显示与任务实际添加到列表的时机的常见误解，并重点讲解了如何利用浏览器本地存储（localstorage）实现任务数据的持久化，确保用户关闭页面后数据不丢失。文章提供完整的代码示例和实践建议，旨在帮助开发者创建功能完善且用户友好的待办事项应用。

1. 构建基础待办事项列表

一个功能性的待办事项列表通常由一个文本输入框、一个添加按钮和显示任务的区域组成。用户在输入框中输入任务内容，点击按钮后，任务便会显示在列表中。

1.1 HTML 结构解析

首先，我们需要定义页面的基本骨架。以下是一个简洁的HTML结构，包含一个输入框、一个按钮以及一个用于显示任务的容器：

构建与持久化待办事项列表：HTML、JavaScript实现及常见UI问题解析-第2张图片-佛山资讯网

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的待办事项列表</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    #newtasks { margin-bottom: 20px; }
    #textInput { padding: 8px; width: 200px; border: 1px solid #ccc; }
    #addTask { padding: 8px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; }
    #addTask:hover { background-color: #0056b3; }
    .task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      margin-bottom: 5px;
      border: 1px solid #eee;
      background-color: #f9f9f9;
    }
    .task-item button {
      background-color: #dc3545;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    .task-item button:hover {
      background-color: #c82333;
    }
  </style>
</head>
<body>
  <p id="newtasks">
    <input type="text" id="textInput" placeholder="输入任务" />   
    <button id="addTask">添加任务</button><br />
  </p>
  <p id="main">
    <!-- 任务将在此处显示 -->
  </p>
</body>
</html>

登录后复制

在这个结构中：

#textInput 是用户输入任务的文本框。
#addTask 是触发任务添加操作的按钮。
#main 是一个容器，JavaScript会将新添加的任务动态地插入到这里。
CSS样式提供了一个基本的视觉呈现，使列表更具可读性。

1.2 JavaScript 核心逻辑：添加任务

接下来，我们使用JavaScript来处理用户交互。核心逻辑包括获取DOM元素、定义添加任务的函数以及监听按钮点击事件。

立即学习“Java免费学习笔记（深入）”；

// 获取DOM元素
const main = document.querySelector("#main");
const inputText = document.querySelector("#textInput");
const taskBtn = document.querySelector("#addTask");

// 存储任务的数组，稍后会用于持久化
let tasks = []; 

// 渲染所有任务到DOM的函数
function renderTasks() {
  main.innerHTML = ""; // 清空现有任务显示
  tasks.forEach((taskText, index) => {
    const taskItem = document.createElement("p");
    taskItem.classList.add("task-item");

    const taskContent = document.createElement("span");
    taskContent.textContent = taskText;
    taskItem.appendChild(taskContent);

    // 添加删除按钮
    const deleteButton = document.createElement("button");
    deleteButton.textContent = "删除";
    deleteButton.addEventListener("click", () => {
      deleteTask(index); // 调用删除任务函数
    });
    taskItem.appendChild(deleteButton);

    main.appendChild(taskItem);
  });
}

// 添加新任务到数组并渲染
function addTask(taskData) {
  tasks.push(taskData); // 添加到任务数组
  renderTasks(); // 重新渲染所有任务
  inputText.value = ""; // 清空输入框
}

// 删除任务并重新渲染
function deleteTask(index) {
  tasks.splice(index, 1); // 从数组中移除任务
  renderTasks(); // 重新渲染所有任务
}

// 监听“添加任务”按钮的点击事件
taskBtn.addEventListener("click", () => {
  const taskValue = inputText.value.trim(); // 获取输入值并去除首尾空格
  if (taskValue === "") {
    alert("请输入任务内容！");
  } else {
    addTask(taskValue);
  }
});

登录后复制

代码说明：

renderTasks() 函数负责遍历 tasks 数组，为每个任务创建HTML元素并将其添加到#main容器中。每次任务列表更新（添加、删除）时都会调用此函数，以确保UI与数据同步。
addTask(taskData) 将新任务添加到 tasks 数组，然后调用 renderTasks() 更新显示。
deleteTask(index) 根据索引从 tasks 数组中移除任务，并同样调用 renderTasks()。
事件监听器在按钮点击时被触发，它会检查输入框是否为空，如果非空则调用 addTask。