最终效果为上图所示
Git
git clone https://github.com/DrBallon/TodoList.git
界面
最终效果如上图所示,界面整体由上方输入框,下方内容板块和清空按钮组成
上方输入框:输入文字后,回车,将任务条添加至”正在进行“分组
下方内容板块:分为正在进行和已完成两组。每组由多个任务条组成
任务条:由 状态,内容,删除按钮
状态(checkbox):当前任务条状态
内容(p/input) :显示内容。单击变为可编辑状态。可编辑状态时单击其他处切换回去并修改内容
删除按钮 :删除该任务条
清空按钮:点击清空所有内容
数据结构
[{
"id": 0,"done": true,"content": "aaaa"},
{
"id": 1,"done": false,"content": "bbbb"},
{
"id": 2,"done": false,"content": "cccc"}]
事件
输入框:绑定按键事件(enter键)
任务条:
完成状态(checkbox):绑定点击事件,点击切换状态值并更新页面
内容(p) / 编辑框(input):默认为内容栏。内容栏绑定点击事
件,点击隐藏p,显示input并获得焦点。input失去焦点时,更新数据,切换回p,并更新页面
删除按钮:动态生成时绑定任务编号(id)。绑定点击事件,点击时根据编号删除数据,更新页面。
清空按钮:点击事件。点击时清空localstorage
页面逻辑
打开页面 》 从localstorage获取数据,动态生成页面 》 数据更新时,更新数据,更新页面,将新保存数据至localstorage
方法
localstorage操作(读取,设置,清空)
//从localStorage获取数据
function getData() {
return JSON.parse(window.localStorage.getItem('data'))
}
//保存数据至localStorage
function saveData(data) {
window.localStorage.setItem('data', JSON.stringify(data))
}
//删除保存数据至localStorage数据
function delData() {
//临时变量
tempData = []
window.localStorage.clear()
}