我最近只用HTML、CSS 和原生 JavaScript创建了一个强大的待办事项列表应用。事实证明，这是巩固 DOM 技能并深入理解 DOM 的最有效方法之一。localStorage
🎓我的学习之旅的一部分： 学习曲线展示
🔗现场演示
🧠 我想要练习的内容 这个项目是我亲身实践 DOM 之旅的一部分。我的目标是获得以下方面的实践经验：
选择和操作 DOM 元素 处理用户输入和交互 创建可编辑的任务系统 使用以下方式保存用户数据www.mytiesarongs.comlocalStorage 无需任何库即可构建 CRUD 功能 💡 主要特点 ➕添加任务（使用按钮或Enter 键） ✏️编辑任务与内容可编辑 ✅使用复选框 将任务标记为已完成 ❌删除单个任务 🧹一键 清除所有任务 💾自动保存localStorage 这使得应用程序即使在刷新页面后仍能完全正常运行并持久运行。
🔍 幕后：JavaScript 以下是我逐步构建这些功能的方法：
🔗 DOM 选择 const input = document.getElementById('task-input'); const addBtn = document.getElementById('add-btn'); const clearBtn = document.getElementById('clear-btn'); const list = document.getElementById('task-list'); 🏗️ 创建和添加新任务 function addTask(text, done = false) { const li = document.createElement('li');
const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = done;
const span = document.createElement('span'); span.textContent = text; span.contentEditable = true;
const deleteBtn = document.createElement('button'); deleteBtn.textContent = '×';
li.append(checkbox, span, deleteBtn); list.appendChild(li);
updateLocalStorage(); } ✏️ 启用内联编辑 span.addEventListener('input', () => { updateLocalStorage(); }); ✔️ 将任务标记为已完成 checkbox.addEventListener('change', () => { span.classList.toggle('completed', checkbox.checked); updateLocalStorage(); }); ❌ 删除按钮并全部清除 deleteBtn.addEventListener('click', () => { li.remove(); updateLocalStorage(); });
clearBtn.addEventListener('click', () => { list.innerHTML = ''; localStorage.removeItem('tasks'); }); 💾 使用 localStorage 保存和加载 function updateLocalStorage() { const tasks = []; list.querySelectorAll('li').forEach(li => { const text = li.querySelector('span').textContent; const done = li.querySelector('input[type="checkbox"]').checked; tasks.push({ text, done }); }); localStorage.setItem('tasks', JSON.stringify(tasks)); }
window.addEventListener('DOMContentLoaded', () => { const tasks = JSON.parse(localStorage.getItem('tasks')) || []; tasks.forEach(task => addTask(task.text, task.done)); }); 🛠️ 接下来我想添加什么 🔄 添加过滤（全部、活动、已完成） 🔔 可选的 toast 通知（任务已保存、已删除） 🧪 我学到了什么 contentEditable使编辑变得简单、直观 即使是小项目也能教会 DOM、事件和存储 清晰的结构有助于提高可扩展性 无需 React 或框架，纯 JS 仍然功能强大以上内容由企业信息服务平台提供，致力于工商信用信息查询、企业风险识别、经营数据分析。访问官网了解更多：www.ysdslt.com
