做一个待办清单App

做一个待办清单App——让数据存得住才算真App

📖知识引入

📝列表展示

待办App的核心是一个列表：每条待办有文字、复选框（是否完成）、删除按钮。用JavaScript数组存所有待办，循环渲染到页面上，增删改都重新渲染。

➕增删改三连

输入框+「添加」按钮=新增；每条后的「×」按钮=删除；点待办文字=改成可编辑状态。这三个动作是所有清单类App的标配，Todoist、滴答清单都这套。

💾本地存储localStorage

刷新页面待办就消失？因为只住在内存里！用浏览器内置的localStorage，把数组转成字符串存进浏览器，下次打开自动读取——无需后端，零成本数据持久化。

✅勾选完成

点复选框把待办标记为已完成：文字加删除线、变灰色、移到列表底部。数据里加一个 done: true/false 字段，渲染时按这个字段加不同样式——这就是状态管理。

📊清空与统计

高级功能：清空已完成的待办、统计还有几条没做（「今天还剩3件事」）。告诉AI加这些功能，它会自动改数据结构和渲染逻辑，让App从能用变成好用。

💡

localStorage让数据存得住——刷新页面待办不消失，零后端成本！

🔍待办清单App的诞生记

// 待办App核心逻辑
let todos = JSON.parse(localStorage.getItem("todos") || "[]");

function save() {
  localStorage.setItem("todos", JSON.stringify(todos));
}

function add() {
  const input = document.querySelector("#input");
  if (input.value.trim()) {
    todos.push({ text: input.value, done: false });
    input.value = "";
    save(); render();
  }
}

function toggle(i) {
  todos[i].done = !todos[i].done;
  save(); render();
}

function render() {
  const list = document.querySelector("#list");
  // 用字符串拼接，避免模板字符串的转义
  list.innerHTML = todos.map((t, i) =>
    "<li class='" + (t.done ? "done" : "") + "'>" +
      "<input type='checkbox' " + (t.done ? "checked" : "") +
      " onchange='toggle(" + i + ")'> " + t.text +
    "</li>"
  ).join("");
}
render();

跟着做，做出能用的Todo App：

第1步 提需求
「用HTML+CSS+JS做一个待办清单：
  - 输入框+添加按钮新增待办
  - 每条带复选框和删除按钮
  - 完成的加删除线变灰
  - 用localStorage保存，刷新不丢
  - 简洁清爽，配色绿色」

第2步 AI生成代码
index.html / style.css / script.js
核心数据结构：
  todos = [
    { text: "写作业", done: false },
    { text: "买菜", done: true }
  ]

第3步测试核心功能

添加「学Trae」→列表出现 ✅

勾选→加删除线 ✅

刷新页面→还在 ✅

删除→消失 ✅

第4步迭代升级「加一个统计：今天还剩X件没做」「加一个清空已完成按钮」「待办太多时支持滚动」

第5步自定义改成你的颜色、加图标、改成记录学习任务、购物清单……

数据流闭环：

输入→加到数组→存localStorage

→渲染到页面→用户操作→更新数组

→再存→再渲染

你的待办App，从此诞生！

🎯小测验

第1题：为什么刷新页面待办会消失？

第2题：localStorage的特点是？

第3题：标记一条待办为「已完成」，数据上要？

📝本课知识点

✓待办核心：列表+复选框+删除按钮
✓增删改三连是所有清单App的标配
✓localStorage让数据存得住
✓done字段管理状态
✓统计和清空让App从能用到好用

第8课完成！继续探索下一课吧 🚀

🛠️

上一课

第7课

下一课

第9课

🛠️