备忘录支持添加和删除任务的核心是用form捕获输入、addEventListener监听submit事件并调用preventDefault()阻止刷新，动态操作ul列表；新增用li包裹文本插入ul末尾，删除采用事件委托绑定到ul上，通过closest('li').remove()移除整项；本地存储依赖localStorage，需用JSON.stringify()和JSON.parse()处理任务数组，初始化时判空避免解析null报错，每次增删后立即更新存储；任务对象应含id、text、done字段以支持完成状态勾选与持久化，checkbox change事件同步更新数据并重绘样式；纯HTML+CSS无法实现交互逻辑，必须依赖JavaScript执行DOM操作、事件绑定和存储读写。
怎么让备忘录支持添加和删除任务
核心是用 form 捕获输入，用 addEventListener 监听提交事件，再动态操作 ul 列表。别直接写 document.write —— 那会清空整个页面。
- 表单
submit事件默认刷新页面，必须调用event.preventDefault() - 新增任务建议用
li包裹文本，再插入到ul#task-list开头或末尾（prepend()或append()） - 删除按钮要绑定在每个
li内部，推荐用事件委托：监听ul的click，判断event.target.classList.contains('delete-btn') - 删完记得调用
event.target.closest('li').remove()，而不是只删按钮本身
本地存储任务数据不丢失
关掉浏览器再打开，任务还在，靠的是 localStorage。它只能存字符串，所以得用 JSON.stringify() 和 JSON.parse() 转换数组。
- 初始化时先读
localStorage.getItem('tasks')，如果返回null就设为空数组，别直接JSON.parse(null)（会报错） - 每次增/删后立刻更新存储：
localStorage.setItem('tasks', JSON.stringify(tasksArray)) - 注意：
localStorage在无痕模式或禁用 JS 时不可用，别当唯一备份手段 - 任务对象建议至少含
id（用Date.now()或递增计数器）、text、done字段，方便后续扩展
勾选完成状态并持久化
单纯加个 checkbox 不够，得让它影响渲染和存储。关键是把勾选状态同步到任务数据里，并重绘对应 li 的样式。
- 给每个
input[type="checkbox"]绑定change事件，根据checked更新对应任务的done字段 - 更新后立即保存到
localStorage，否则刷新就失效 - 渲染时对
done: true的任务加class="completed"，CSS 里用text-decoration: line-through视觉标记 - 别用
innerHTML全量重绘列表 —— 会丢失已绑定的事件监听器，改用逐项更新li的className和textContent
为什么不能用纯 HTML+CSS 实现完整功能
HTML 是结构，CSS 是样式，缺了 JavaScript 就没法响应用户操作、读写存储、动态增删节点。哪怕只加一行 <script>alert('hi')</script>，也跨过了静态页面的边界。
立即学习“前端免费学习笔记（深入）”；
-
localStorage、addEventListener、JSON都是 JS API，HTML 标签本身不提供逻辑能力 - 想绕开 JS？可以用服务端渲染 + 表单提交跳转，但那就不是“本地备忘录”，而是网页应用了
- 最简可行版本必须包含：一个
form、一个ul、一段内联或外部<script>，三者缺一不可
真正容易被忽略的，是事件监听器的生命周期管理 —— 动态添加的按钮，其点击事件必须在插入 DOM 后绑定，或者统一用事件委托；否则点不动，还查不出错在哪。
