17. CRUD 实战：Todo / 任务管理

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

CRUD 是 Create、Read、Update、Delete。
每次数据变化后重新渲染，是小项目里最简单可靠的模式。
使用事件委托可以处理动态生成的任务项。

四、练习建议

增加编辑任务功能。
增加“只看未完成”筛选。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/17-todo-crud.js，下面同步展示，方便学习和复制。

// 页面 17：Todo CRUD 综合练习
const TODO_KEY = 'js-pack-todos';
const todoInput = document.querySelector('#p17-input');
const addTodoBtn = document.querySelector('#p17-add');
const todoList = document.querySelector('#p17-list');
let todos = loadTodos();

function loadTodos() {
  const raw = localStorage.getItem(TODO_KEY);
  return raw ? JSON.parse(raw) : [
    { id: 1, text: '学习 DOM 操作', done: true },
    { id: 2, text: '完成 Todo CRUD', done: false }
  ];
}

function saveTodos() {
  localStorage.setItem(TODO_KEY, JSON.stringify(todos));
}

function renderTodos() {
  todoList.innerHTML = todos.map((todo) => `
    <div class="item-card demo-row" data-id="${todo.id}">
      <input type="checkbox" ${todo.done ? 'checked' : ''} data-action="toggle" style="width:auto;">
      <span style="flex:1; ${todo.done ? 'text-decoration:line-through;color:#94a3b8;' : ''}">${todo.text}</span>
      <button class="danger" data-action="delete">删除</button>
    </div>
  `).join('');
}

function addTodo() {
  const text = todoInput.value.trim();
  if (!text) return;
  todos.push({ id: Date.now(), text, done: false });
  todoInput.value = '';
  saveTodos();
  renderTodos();
}

function toggleTodo(id) {
  todos = todos.map((todo) => todo.id === id ? { ...todo, done: !todo.done } : todo);
  saveTodos();
  renderTodos();
}

function deleteTodo(id) {
  todos = todos.filter((todo) => todo.id !== id);
  saveTodos();
  renderTodos();
}

addTodoBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keydown', (event) => { if (event.key === 'Enter') addTodo(); });
todoList.addEventListener('click', (event) => {
  const row = event.target.closest('[data-id]');
  if (!row) return;
  const id = Number(row.dataset.id);
  const action = event.target.dataset.action;
  if (action === 'toggle') toggleTodo(id);
  if (action === 'delete') deleteTodo(id);
});
renderTodos();