jquery的应用----todolist小项目

目录

一、核心思路：

二、步骤分解：

三、代码获取：

---

一、核心思路：

           不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据

存储的数据格式:var todolist=[{title:'xxx',done:false}]

注意：localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)

            获取本地存储的数据，需要把字符串数据转换为对象格式JSON.parse()

---

二、步骤分解：

//第一步  按下回车，把新数据添加到本地存储中里面

页面中的数据都要从本地存储里面获取，这样刷新页面不会丢失数据，

所以先要把数据保存到本地存储里面

①利用事件对象keyCode判断用户按下回车键（13）

②声明一个数组，保存数据

③先要读取本地存储原来的数据（声明函数getData()),放到这个数组里面

④之后把最新从表单获取过来的数据，追加到数组里面

⑤最后把数组存储给本地存储（声明函数savaData())

//第二步 本地存储的数据渲染加载到页面

①因为后面也会经常渲染加载操作，所以声明一个函数load,方便后面调用

②先要读取本地存储数据（数据要转换为对象格式）

③之后遍历这个数据（$.each()）,有几条数据，就生成几个小li添加到.doing里面

④每次渲染时候，想要把原先的.doing的内容清空，然后渲染到最新的数据

//第三步 删除操作

①点击里面的a链接，不是删除li,而是删除本地存储对应的数据

②先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染到列表

③我们给链接自定义属性记录当前的索引号

④根据这个索引号删除相关的数据---数组的splice(i,1)方法

⑤存储修改后的数据，然后存储给本地存储

⑥重新渲染加载数据列表

⑦因为a是动态创建的，我们使用on方法绑定事件

//第四步 正在进行和已完成选项操作

①当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表

②点击之后，获取本地存储的数据

③修改对应的数据属性done为当前复选框的checked状态

④之后保存到本地存储

⑤重新渲染数据列表

⑥load加载函数里面，新增一个条件，如果当前数据的done为true就是已经完成，就把列表渲染到.done里面

⑦如果当前数据的done是false,则是待办事项，就把列表渲染加载到.doing里面

//第五步 统计正在进行个数和已经完成个数

①在我们Load函数里面操作

②声明两个变量：doingCount代办个数 doneCount已完成个数

③当遍历本地存储数据的时候，如果数据done为false,则todoCount++,否则doneCount++

④最后修改相应的元素text()

//第六步 编辑正在进行的数据

①当我们双击正在进行的任务，添加文本框,因为input是动态添加的，此时要使用on添加双击事件

②先获取本地存储数据，利用a的索引号找到当前点击的span

③取消选中文字使用 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

④在span里面添加文本框，并将本地存储的当前的索引对应的title值赋值给文本框，将文本框文字处于选中状态 select()

⑤为文本框添加失去焦点事件，将当前文本框的值赋值给对应存储的title

⑥之后保存到本地存储，重新渲染页面

⑦为文本框添加键盘弹起事件，当按下回车时，自动触发失去焦点事件

---

三、代码获取：

          点击可跳转到仓库