核心是用localstorage持久化存储todo数组，页面加载时json.parse读取并渲染，增删改操作均先更新内存数组再json.stringify写回localstorage，确保刷新不丢数据。
用 WebStorage 实现网页版 Todo 清单，核心是把任务数据存在 localStorage 里，页面刷新也不丢；添加、删除、标记完成等操作都同步更新本地存储。
初始化时从 localStorage 读取任务列表
页面加载后立即检查 localStorage 中是否有保存的 todo 数据。如果有，解析为数组并渲染到页面；如果没有，初始化一个空数组。
- 使用
JSON.parse(localStorage.getItem('todos'))读取，注意加try...catch防止解析失败 - 推荐默认结构：每个 todo 是对象，含
id（建议用 Date.now() 或自增序号）、text（内容）、completed（布尔值） - 渲染可用
forEach遍历数组，拼接 HTML 字符串或用document.createElement动态生成列表项
添加新任务时写入 localStorage
用户输入内容并点击“添加”后，生成新 todo 对象，追加到数据数组末尾，再存回 localStorage。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 输入框值需去除首尾空格，空内容不添加
- 存之前必须用
JSON.stringify(todos)转成字符串，因为localStorage只支持字符串值 - 记得调用
renderList()重新绘制 DOM，保持视图与数据一致
更新状态（完成/删除）后同步 localStorage
点击复选框切换完成状态，或点击删除按钮时，不是只改 DOM，而是先修改内存中的数组，再持久化。
- 切换完成状态：找到对应
id的项，翻转completed值，再存 - 删除任务：用
filter()创建新数组剔除目标项，避免直接修改原数组引发引用问题 - 所有写操作后都要执行
localStorage.setItem('todos', JSON.stringify(todos))
小技巧提升体验和健壮性
不用复杂框架，几处细节能让 Todo 更可靠、更顺手：
- 给每个
<li>设置data-id属性，方便事件委托快速定位操作目标 - 清空输入框后自动聚焦，提升连续添加效率
- 监听
storage事件（可选），在多标签页间同步变化（如另一窗口删了任务，当前页也能感知） - 避免频繁读写：所有变更集中操作数组，最后统一存一次，别每点一下就存一遍
不复杂但容易忽略：每次读写前后保持数据结构统一，存的是数组，取出来也必须当数组用；别混用 sessionStorage（关页即失）和 localStorage（长期保存），Todo 清单适合后者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
