当前位置：首页 > news >正文

原生JavaScript+Tailwind CSS构建现代化任务清单应用

news 2026/5/14 16:00:57

1. 项目概述：一个现代、轻量的任务清单网站

最近在整理个人项目时，翻出了一个之前为了练手和快速搭建原型而写的任务清单网站。这个项目没有使用任何复杂的框架或后端，纯粹由 HTML、CSS 和原生 JavaScript 构成，但借助 Tailwind CSS 这个工具，它拥有了一个相当现代化和响应式的界面。我给它起了个名字叫 “CopawWorks”，听起来有点意思，但核心就是一个能帮你理清每日待办事项的轻量级工具。

这个工具能做什么呢？简单来说，它就是你浏览器里的一个数字记事本。你可以随时添加新的任务，比如“完成项目周报”、“给客户回邮件”，并为每个任务设定高、中、低三种优先级。完成的任务可以一键勾选，未完成的任务可以随时编辑或删除。它还提供了筛选功能，让你能快速聚焦在“全部”、“待办”或“已完成”的任务上。界面上方会实时统计任务总数和完成情况，所有数据都安全地保存在你电脑的浏览器本地存储里，关闭页面再打开也不会丢失。最棒的是，它完全响应式，在手机、平板和电脑上都能有不错的浏览体验，而且整个界面采用了时下流行的毛玻璃（Glassmorphism）效果，视觉上很清爽。

我之所以选择这样一套技术栈，核心诉求就是“快”和“简”。不需要配置开发环境，不需要安装依赖包，甚至不需要网络——双击index.html文件就能直接运行。这对于前端新手想快速体验一个完整项目，或者对于需要临时搭建一个内部工具的场景，都非常友好。接下来，我会详细拆解这个项目的设计思路、每一行代码背后的考量，以及我在开发过程中积累的一些实操心得和避坑技巧。

2. 核心设计与技术选型解析

2.1 为什么选择“纯三件套”而非框架？

在 React、Vue 等框架大行其道的今天，为什么还要回头写原生的 HTML、CSS 和 JavaScript（俗称“三件套”）？这其实是一个很实际的权衡。对于这样一个功能相对单一、交互逻辑明确的任务清单应用，引入一个完整的前端框架会带来不必要的复杂度。框架意味着需要学习其特定的语法、构建工具和生命周期，对于项目快速启动和后期维护（尤其是单人开发）来说，成本偏高。

使用原生技术栈，最大的优势是零门槛和极致轻量。任何一台电脑，只要有一个现代浏览器（如 Chrome、Edge、Firefox），就能直接运行和查看源码。这对于教学演示、概念验证（PoC）或者作为更大项目中的一个独立模块，都非常合适。所有逻辑都写在一个文件里（或少数几个文件），结构一目了然，调试也极其方便，直接在浏览器开发者工具里打断点即可。

当然，原生开发也有其挑战，比如状态管理、组件复用和 DOM 操作效率。但对于一个任务清单，其状态（任务列表）的规模很小，直接使用 JavaScript 对象管理完全可行。DOM 操作虽然繁琐，但通过合理的函数封装，代码依然能保持清晰。这个项目正是这种思路的实践：用最基础的技术，实现够用的功能，并追求良好的开发体验。

2.2 Tailwind CSS：效率与一致性的利器

如果只用原生 CSS，要实现一个美观且响应式的界面，需要编写大量的样式代码，并且要精心维护一套设计规范（如间距、颜色、圆角）。这正是我引入Tailwind CSS的原因。Tailwind 是一个实用优先（Utility-First）的 CSS 框架，它提供了一系列细粒度的、单一样式功能的类名，比如p-4（内边距 16px）、bg-blue-500（蓝色背景）、rounded-lg（大圆角）。

使用 Tailwind，我几乎不再需要手写具体的 CSS 规则。整个页面的样式，完全通过为 HTML 元素添加一系列 Tailwind 类名来构建。这样做有几个显著好处：

开发速度极快：不需要在 HTML 和 CSS 文件之间来回切换，样式就在标签上，所见即所得。
设计一致性：Tailwind 有一套预设的尺寸、颜色比例，确保了整个项目的视觉风格统一。
响应式内置：通过添加sm:、md:、lg:等前缀，可以轻松实现针对不同屏幕尺寸的样式调整，这是本项目支持移动端的核心。
极小的生产体积：通过构建工具（虽然本项目未使用，但可以集成）可以剔除未使用的样式，最终生成的 CSS 文件非常小。

例如，创建一个有阴影、圆角、内边距的卡片，代码可能如下：

<div class="bg-white rounded-xl shadow-lg p-6"> <!-- 卡片内容 --> </div>

这比写一段独立的 CSS.card { ... }要直观和快速得多。当然，初学者可能需要记忆一些类名，但一旦熟悉，效率提升是巨大的。

2.3 数据持久化方案：LocalStorage 的适用场景

任务清单的数据需要持久化，否则刷新页面就全没了。对于纯前端项目，可选方案主要有LocalStorage、IndexedDB和Cookies。

Cookies：存储空间小（约4KB），每次请求都会发送到服务器，不适合存储应用状态数据。
IndexedDB：功能强大，可存储大量结构化数据，但 API 相对复杂，对于简单的任务列表有点“杀鸡用牛刀”。
LocalStorage：存储空间较大（通常5-10MB），API 极其简单（setItem,getItem,removeItem），数据以键值对形式存储，且仅在客户端。

因此，LocalStorage 是本项目最合适的选择。它的“键值对”特性正好匹配我们的需求：一个键（如“copawworks-tasks”）对应一个值（任务列表的 JSON 字符串）。每次任务列表发生变化（增、删、改、完成状态切换），我们都将最新的列表数组JSON.stringify()后存入 LocalStorage。页面加载时，再JSON.parse()出来初始化应用。

注意：LocalStorage 是同步操作，且存储的是字符串。对于非常大的数据（接近容量上限）或频繁的读写，可能会对主线程造成性能影响。但对于任务清单这种小规模、低频操作的应用，这完全不是问题。另外，LocalStorage 遵循同源策略，不同网站的数据是隔离的。

2.4 交互与图标：原生 JavaScript 与 Font Awesome

交互逻辑全部使用原生 ES6+ JavaScript 编写。这包括：

事件监听：为添加按钮、输入框（回车键）、筛选按钮、每个任务项的复选框、编辑和删除按钮绑定事件。
DOM 操作：根据任务数据动态创建、更新或删除对应的 HTML 元素。
状态管理：维护一个内存中的任务数组，作为唯一的“数据源”，任何视图变化都由此数组驱动。

图标库选择了Font Awesome的免费 CDN 版本。它提供了丰富、高质量的图标，通过简单的<i>标签和类名就能使用，比如<i class="fas fa-plus"></i>显示一个加号图标。这比使用图片或自己绘制 SVG 要方便和一致得多，也符合项目“快速美观”的定位。

3. 核心功能实现与代码拆解

3.1 项目结构与初始化

项目结构极其简单，这符合“开箱即用”的目标：

copawworks/ ├── index.html # 包含所有HTML、内联样式（Tailwind CDN）和JavaScript代码 └── README.md # 项目说明文档

是的，只有一个index.html文件。我将 Tailwind CSS 和 Font Awesome 通过 CDN 链接引入，JavaScript 代码也以内联<script>标签的形式写在 HTML 文件底部。这种“单文件”模式，虽然不利于大型项目，但对于这种微型工具来说，传播和运行的便利性是第一位的。用户只需要下载这一个文件，双击就能看到完整效果。

在 HTML 的<head>部分，引入必要的资源：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CopawWorks - 现代任务清单</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- 可选的自定义样式，用于覆盖或补充 --> <style> /* 毛玻璃效果核心样式 */ .glass { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); } /* 自定义渐变背景 */ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } </style> </head>

这里有几个关键点：

viewport设置确保了移动端的正确缩放。
直接使用 Tailwind 的 CDN，对于生产环境，建议使用其构建工具优化，但开发原型时 CDN 最快。
毛玻璃效果 (backdrop-filter: blur()) 是 CSS 较新的特性，需要-webkit-前缀以保证 Safari 浏览器的兼容性。我将其提取到<style>标签中，是因为 Tailwind 的 CDN 版本默认可能不包含这个工具类，自定义更可靠。
渐变背景色也定义在这里，方便修改。

3.2 状态管理与数据模型

在 JavaScript 部分，我们首先定义核心的状态和数据模型。

// 状态：当前的任务列表和筛选状态 let tasks = []; let currentFilter = 'all'; // 'all', 'pending', 'completed' // 任务数据模型 // 每个任务是一个对象，包含以下属性 // { // id: Date.now(), // 唯一标识，用时间戳简单生成 // text: '任务内容', // priority: 'high', // 'high', 'medium', 'low' // completed: false, // createdAt: new Date().toISOString() // }

tasks数组是应用的“单一数据源”。所有对任务的增删改查，都先修改这个数组，然后触发界面更新和本地存储保存。
currentFilter记录当前活动的筛选器。
每个任务对象设计了几个字段：
- id: 使用Date.now()生成，在单次会话中基本能保证唯一，用于精准定位要操作的任务。
- text: 任务描述。
- priority: 优先级，用于视觉区分（如红色代表高优先级）。
- completed: 布尔值，表示完成状态。
- createdAt: 创建时间，可以用于未来扩展排序功能。

3.3 任务列表的渲染与更新

这是视图层的核心。我们有一个函数renderTasks()，它的职责是根据当前的tasks数组和currentFilter筛选状态，重新生成整个任务列表的 HTML。

function renderTasks() { const taskListEl = document.getElementById('taskList'); const filteredTasks = tasks.filter(task => { if (currentFilter === 'pending') return !task.completed; if (currentFilter === 'completed') return task.completed; return true; // 'all' }); if (filteredTasks.length === 0) { // 显示空状态 taskListEl.innerHTML = ` <div class="text-center py-12 text-gray-500"> <i class="fas fa-clipboard-list text-4xl mb-4"></i> <p>当前没有任务</p> <p class="text-sm mt-2">尝试添加一个任务吧！</p> </div> `; return; } // 生成任务列表HTML taskListEl.innerHTML = filteredTasks.map(task => ` <div class="task-item glass rounded-lg p-4 mb-3 flex items-center justify-between transition-all duration-200 hover:shadow-md ${task.completed ? 'opacity-60' : ''}">function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }

事件监听重绑：由于每次renderTasks()都会用innerHTML完全替换列表内容，之前绑定在任务项按钮上的事件监听器会全部失效。因此，在生成 HTML 后，必须调用attachTaskEvents()函数来为新生成的 DOM 元素重新绑定事件。这是使用这种“重新渲染”模式时必须注意的一点。

3.4 任务操作：增、删、改、标记完成

所有操作都遵循一个模式：更新内存状态（tasks数组） -> 保存到 LocalStorage -> 重新渲染视图。

添加任务：

function addTask(text, priority) { if (!text.trim()) { alert('任务内容不能为空！'); return; } const newTask = { id: Date.now(), text: text.trim(), priority: priority || 'medium', completed: false, createdAt: new Date().toISOString() }; tasks.unshift(newTask); // 新任务添加到开头 saveTasks(); renderTasks(); updateStats(); // 清空输入框 document.getElementById('taskInput').value = ''; // 可选：将焦点移回输入框，方便连续添加 document.getElementById('taskInput').focus(); }

实操心得：tasks.unshift(newTask)将新任务放在数组开头，这样最新添加的任务会显示在列表顶部，符合大多数用户的操作习惯。saveTasks()是一个将tasks数组序列化后存入 LocalStorage 的简单函数。

删除任务：

// 在 attachTaskEvents 函数内 deleteBtn.addEventListener('click', () => { const taskId = parseInt(taskItem.dataset.id); if (confirm('确定要删除这个任务吗？')) { tasks = tasks.filter(t => t.id !== taskId); saveTasks(); renderTasks(); updateStats(); } });

注意：这里使用了confirm进行二次确认，防止误操作。删除的逻辑是创建一个新的数组，过滤掉id不匹配的任务，然后替换旧的tasks数组。这是一种不可变（Immutable）的操作，更清晰且不易出错。

编辑任务：编辑功能稍微复杂，需要提供一个界面让用户修改文本和优先级。常见的实现有两种：1) 弹出一个模态框（Modal）；2) 将任务项临时变成一个输入表单。本项目为了保持简洁，采用了第二种方式。

editBtn.addEventListener('click', () => { const taskId = parseInt(taskItem.dataset.id); const task = tasks.find(t => t.id === taskId); if (!task) return; const taskTextEl = taskItem.querySelector('.task-text'); const originalHtml = taskTextEl.parentElement.parentElement.innerHTML; // 保存原始HTML // 临时替换为编辑表单 const editFormHtml = ` <div class="flex-1"> <input type="text" value="${escapeHtml(task.text)}" class="edit-input w-full px-3 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"> <div class="flex mt-2 space-x-2"> <select class="edit-priority border rounded px-2 py-1 text-sm"> <option value="high" ${task.priority === 'high' ? 'selected' : ''}>高优先级</option> <option value="medium" ${task.priority === 'medium' ? 'selected' : ''}>中优先级</option> <option value="low" ${task.priority === 'low' ? 'selected' : ''}>低优先级</option> </select> <button class="save-edit px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors">保存</button> <button class="cancel-edit px-3 py-1 bg-gray-300 text-gray-700 text-sm rounded hover:bg-gray-400 transition-colors">取消</button> </div> </div> `; taskTextEl.parentElement.parentElement.innerHTML = editFormHtml; // 为编辑表单绑定事件 const saveBtn = taskItem.querySelector('.save-edit'); const cancelBtn = taskItem.querySelector('.cancel-edit'); const editInput = taskItem.querySelector('.edit-input'); const editPriority = taskItem.querySelector('.edit-priority'); editInput.focus(); // 自动聚焦到输入框 const saveEdit = () => { const newText = editInput.value.trim(); if (!newText) { alert('任务内容不能为空！'); editInput.focus(); return; } task.text = newText; task.priority = editPriority.value; saveTasks(); renderTasks(); // 重新渲染整个列表，退出编辑模式 }; saveBtn.addEventListener('click', saveEdit); editInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') saveEdit(); }); cancelBtn.addEventListener('click', () => { // 取消编辑，恢复原始HTML taskTextEl.parentElement.parentElement.innerHTML = originalHtml; // 需要重新绑定这个任务项的事件，因为innerHTML替换了元素 attachTaskEventsForItem(taskItem); }); });

编辑功能的关键点：

就地编辑：通过替换任务项部分区域的innerHTML，将其变为一个包含输入框、下拉框和按钮的表单。
状态保存与回退：在替换前，保存了原始的innerHTML。当用户点击“取消”时，可以完美还原。这是一种简单有效的状态管理。
事件委托的局限性：由于编辑表单是动态插入的，且“保存”、“取消”按钮在事件绑定后才存在，因此不能依赖外层的事件委托。这里直接在创建表单后，为其元素绑定独立的事件监听器。
重新渲染：点击“保存”后，直接修改tasks数组中的对应对象，然后调用renderTasks()。这会用新的、只读的任务项替换编辑表单，自然退出编辑模式。这是一种干净利落的做法。

标记完成任务：

checkbox.addEventListener('change', () => { const taskId = parseInt(taskItem.dataset.id); const task = tasks.find(t => t.id === taskId); if (task) { task.completed = checkbox.checked; saveTasks(); // 注意：这里不调用 renderTasks()，而是只更新当前项的样式，性能更好 const taskTextEl = taskItem.querySelector('.task-text'); if (task.completed) { taskTextEl.classList.add('line-through', 'text-gray-500'); taskItem.classList.add('opacity-60'); } else { taskTextEl.classList.remove('line-through', 'text-gray-500'); taskItem.classList.remove('opacity-60'); } updateStats(); // 更新统计数字 } });

性能优化技巧：对于“标记完成”这种只改变单个任务样式的操作，如果每次都重新渲染整个列表 (renderTasks())，在任务很多时会有不必要的性能开销。这里采用了局部更新的策略：只找到当前任务对应的 DOM 元素，修改其类名来改变视觉状态（添加删除线、降低透明度）。同时更新内存中的task.completed状态并保存。这比全量渲染高效得多。updateStats()函数会重新计算并显示完成/未完成的任务数量。

3.5 数据统计与筛选功能

数据统计：在页面顶部，我们实时显示任务总数和已完成数量。这是一个简单的计算函数。

function updateStats() { const totalTasks = tasks.length; const completedTasks = tasks.filter(t => t.completed).length; document.getElementById('totalTasks').textContent = totalTasks; document.getElementById('completedTasks').textContent = completedTasks; }

每次任务列表发生变化（增、删、改、切换完成状态）后，都需要调用此函数。

任务筛选：筛选功能通过三个按钮（全部/待办/已完成）实现。点击按钮时，改变currentFilter状态，然后重新渲染列表。

// 为筛选按钮绑定事件 document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', function() { // 更新当前激活的按钮样式 document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('bg-blue-100', 'text-blue-800', 'font-bold')); this.classList.add('bg-blue-100', 'text-blue-800', 'font-bold'); // 更新筛选状态并重新渲染 currentFilter = this.dataset.filter; renderTasks(); }); });

这里使用了事件委托的变体，因为筛选按钮在页面加载时就已经存在。我们通过dataset.filter属性（对应 HTML 中的>function exportTasks() { const dataStr = JSON.stringify(tasks, null, 2); // 缩进2格，美化输出 const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr); const exportFileDefaultName = `copawworks-tasks-${new Date().toISOString().slice(0,10)}.json`; const linkElement = document.createElement('a'); linkElement.setAttribute('href', dataUri); linkElement.setAttribute('download', exportFileDefaultName); linkElement.click(); }

原理是创建一个包含 JSON 数据的data:URL，然后动态生成一个<a>标签，设置其href为该 URL，并添加download属性指定默认文件名，最后模拟点击这个链接触发浏览器下载。

导入 JSON（扩展思路）：原项目未实现导入功能，但这是一个很自然的扩展。实现思路是：

添加一个“导入”按钮和一个隐藏的文件输入框 (<input type="file">)。
用户点击按钮时，触发文件输入框的点击事件。
监听文件输入框的change事件，读取用户选择的 JSON 文件。
使用FileReaderAPI 读取文件内容。
用JSON.parse()解析内容，并验证其格式是否符合任务数组的结构。
确认后，用导入的数据替换当前的tasks数组，然后saveTasks()和renderTasks()。

注意事项：导入功能需要谨慎处理，因为会覆盖现有数据。好的做法是：1) 提供合并导入和覆盖导入的选项；2) 在覆盖前请求用户确认；3) 对导入的数据进行严格的格式校验，防止错误数据导致程序崩溃。

4. 样式与交互细节打磨

4.1 实现毛玻璃（Glassmorphism）效果

毛玻璃效果是当前流行的设计趋势，它能营造出层次感和现代感。核心 CSS 只有几行：

.glass { background: rgba(255, 255, 255, 0.25); /* 半透明白色背景 */ backdrop-filter: blur(10px); /* 背景模糊 */ -webkit-backdrop-filter: blur(10px); /* Safari 前缀 */ border: 1px solid rgba(255, 255, 255, 0.18); /* 浅色边框增强质感 */ }

rgba(255, 255, 255, 0.25): 设置背景色为白色，透明度为 25%。透明度是调整效果强弱的关键。
backdrop-filter: blur(10px): 这是实现模糊的关键属性。它会对元素背后的区域进行模糊处理。10px是模糊半径，值越大越模糊。
border: 添加一个更浅、更透明的边框，可以进一步凸显毛玻璃的“磨砂”边缘质感。

兼容性提示：backdrop-filter在现代浏览器中支持良好，但在一些旧版浏览器（如 IE）中不支持。对于本项目，这属于渐进增强（Progressive Enhancement）——支持该特性的浏览器会显示漂亮的毛玻璃效果，不支持的浏览器会回退到半透明的纯色背景，功能完全不受影响。

4.2 响应式布局设计

使用 Tailwind CSS 的响应式工具类，可以毫不费力地创建适配不同屏幕的布局。

<!-- 容器 --> <div class="container mx-auto px-4 py-8 max-w-4xl"> <!-- 标题区 --> <div class="text-center mb-10"> <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">CopawWorks</h1> <p class="text-xl text-blue-100">...</p> </div> <!-- 主卡片 --> <div class="glass rounded-2xl shadow-2xl p-6 md:p-8"> <!-- 输入和统计区 --> <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4"> <!-- 在中等屏幕及以上，flex-direction 为 row，元素水平排列 --> <!-- 在小屏幕，flex-direction 为 column，元素垂直堆叠 --> </div> <!-- 任务列表 --> <div id="taskList"> <!-- 任务项会自适应宽度 --> </div> </div> </div>

关键类名解析：

container mx-auto: 创建一个居中的、有最大宽度的容器。
px-4 py-8: 默认的内边距（左右1rem，上下2rem）。
max-w-4xl: 设置最大宽度。
text-4xl md:text-5xl: 在中等（md:）及以上屏幕，字体大小为5xl；在更小的屏幕，为4xl。
p-6 md:p-8: 在中等及以上屏幕，内边距更大 (2rem)。
flex-col md:flex-row: 默认垂直排列，在中等屏幕及以上水平排列。
gap-4: 设置 Flex 子元素之间的间隙。

通过组合这些类，我们几乎没写一行自定义 CSS，就完成了一个从手机到桌面都表现良好的响应式界面。

4.3 交互动画与反馈

良好的微交互能显著提升用户体验。Tailwind 提供了简单的工具类来实现。

悬停效果：hover:shadow-md、hover:bg-blue-50。当鼠标悬停在按钮或任务项上时，产生阴影或背景色变化，给予视觉反馈。
过渡动画：transition-all duration-200。当元素的属性（如阴影、背景色、透明度）发生变化时，会在200毫秒内平滑过渡，而不是生硬地跳变。例如，标记任务完成时，透明度和删除线是渐变的。
焦点环：对于输入框和按钮，使用focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none。这会在用户用键盘 Tab 键聚焦到元素时，显示一个蓝色的光环，这对于无障碍访问（Accessibility）非常重要。outline-none移除了默认的浏览器轮廓线，用自定义的focus:ring替代，使其更美观。

5. 部署、扩展与常见问题

5.1 部署到 GitHub Pages

将这样一个静态网站部署到网上供他人访问非常简单，GitHub Pages 是免费且优秀的选择。

创建仓库：在 GitHub 上新建一个仓库，例如命名为copawworks。
上传文件：将你的index.html、README.md等文件推送到该仓库。
启用 Pages：进入仓库的Settings->Pages页面。
选择分支：在Source下拉菜单中，选择你的主分支（通常是main或master），然后点击Save。
等待部署：几分钟后，你会看到一个链接（格式如https://[你的用户名].github.io/copawworks/），这就是你网站的在线地址。

重要提示：由于我们使用了 Tailwind 和 Font Awesome 的 CDN，网站需要网络连接才能加载完整样式和图标。如果部署后样式异常，请检查浏览器控制台是否有 CDN 资源加载失败的报错。在国内网络环境下，有时 CDN 可能不稳定，可以考虑将 Tailwind 构建为本地 CSS 文件，并将 Font Awesome 图标下载到本地使用，但这会增加项目复杂度。

5.2 功能扩展思路

这个基础版本可以沿多个方向扩展：

任务分类/标签：为任务对象增加一个tags数组字段。在添加/编辑任务时，允许用户输入或选择标签。渲染时，在每个任务项后显示标签徽章。还可以增加按标签筛选的功能。
截止日期与提醒：增加dueDate字段（存储为 ISO 字符串或时间戳）。在界面上添加日期选择器。可以计算任务是否临近或过期，并用不同颜色标识。甚至可以利用浏览器的Notification API在截止时间弹出桌面通知（需要用户授权）。
数据同步：如果想让数据在多个设备间同步，就需要后端。最简单的起步是使用 Firebase、Supabase 或 Airtable 这样的 BaaS（后端即服务），它们提供了简单的数据库和 API。前端从使用 LocalStorage 改为调用它们的 SDK 来读写数据。
离线优先：即使未来加入网络同步，也应考虑离线使用。这可以通过Service Worker和Cache API将应用本身缓存，并利用IndexedDB在本地存储数据，网络恢复时再同步。

5.3 常见问题与排查

问题：打开页面，样式完全错乱或没有样式。
- 排查：检查浏览器开发者工具（F12）的“网络”（Network）选项卡，查看tailwindcss.com和cdnjs.cloudflare.com的 CDN 链接是否加载成功。如果失败，可能是网络问题。
- 解决：尝试刷新，或使用其他网络。对于长期项目，建议将 Tailwind 构建为本地 CSS 文件（通过 npm 安装tailwindcss包并构建）。
问题：添加或编辑任务时，页面闪烁一下，然后输入框里的内容没了，但任务没添加/更新。
- 排查：这通常是表单的默认提交行为导致的。如果输入框或按钮在<form>标签内，或者按钮是type="submit"，点击按钮或按回车会触发表单提交，导致页面刷新。
- 解决：确保处理事件的函数中调用了event.preventDefault()来阻止默认行为。或者，更简单的办法是不要使用<form>标签，我们的示例中就是直接用的<div>包裹输入区域。
问题：删除或完成操作后，其他任务项的事件好像失效了。
- 排查：这很可能是因为在renderTasks()中使用了innerHTML完全替换了列表容器内的所有子元素，导致之前通过addEventListener绑定在这些子元素上的事件监听器全部被清除。
- 解决：这就是为什么我们在每次renderTasks()之后都要调用attachTaskEvents()来重新绑定事件。确保这个函数被正确调用，并且能选中新生成的 DOM 元素。
问题：在手机上使用，输入框被键盘遮挡。
- 排查：这是移动端 Web 开发的常见问题。当虚拟键盘弹出时，视口（viewport）高度可能发生变化，导致布局错乱。
- 解决：可以通过 CSS 或 JavaScript 进行一些调整。一个简单的 CSS 方法是确保容器使用min-height: 100vh而不是height: 100%，并配合flexbox布局。更复杂的处理可能需要监听window的resize或visualViewport变化事件。
问题：LocalStorage 数据丢失。
- 排查：LocalStorage 是域名隔离的。如果你通过file://协议直接打开 HTML 文件，某些浏览器（如 Chrome）的 LocalStorage 行为可能不一致，或者在隐私模式下可能被禁用。
- 解决：建议通过本地服务器（如使用 VS Code 的 Live Server 插件，或运行python -m http.server）来访问页面，这样行为更接近线上环境。同时，在代码中读取 LocalStorage 时做好错误处理，比如try...catch。