项目大致需求
用户可以自由增删改查的任务清单列表,包含需求功能:
- 增加任务
- 删除任务
- 修改任务内容
- 用户每次打开页面都展示先前增加的任务列表
- 被删除的任务可在垃圾箱查看并选择恢复或完全删除
- 用户可以对每项任务设置是否已完成
- 需要一个全部完成按钮 点击后所有任务状态修改为已完成
- 需要一个删除全部按钮, 点击后删除全部任务
- 需要一个清空垃圾箱按钮,点击后删除垃圾箱内所有任务
需求细节
本地存储的键名为data
增加任务
- 输入框内输入任务内容后点击确定按钮或回车将添加一条任务数据至任务列表展示,数据需要同步存储至本地 localStorage 中,做长时间存储
展示任务列表(查询功能)
- 用户每次打开页面都展示先前增加的任务列表,从本地localStorage中查询出来
删除任务
- 任务列表中每条任务都有一个删除按钮,点击后提示是否删除,用户确定删除后转为已删除状态(可在垃圾箱查看已删除状态的任务),删除状态使用 isDel 属性表示 true 表示已删除 false 表示未删除
修改任务
- 任务列表中的每条任务鼠标双击后弹出一个输入框(回显任务内容)和一个确定按钮 输入内容确定后将修改这条任务数据的任务内容
- 任务列表中的每条任务上都有一个已完成复选框(已完成时为对钩,未完成时为空复选框,使用isComplete作为属性名,已完成时为 true 未完成时为 false)
垃圾箱功能
- 任务列表中被删除的任务将在垃圾箱列表中展示,在此页面中仍可对任务设置是否完成操作
- 垃圾箱列表中的每条任务上都有一个恢复按钮,点击后将恢复任务状态为未删除重新展示在任务列表中
- 在查看垃圾箱时要显示清空垃圾箱按钮,当状态为查看任务列表式隐藏清空垃圾箱按钮
任务列表
- 查看任务列表时显示删除全部按钮,点击删除所有任务
- 查看任务列表时显示全部完成按钮,点击所有任务转为已完成状态
本地存储数据格式
[
{task : '任务内容1' , isComplete : false , isDel : false},
{task : '任务内容2' , isComplete : false , isDel : false}
]