jQuery案例——todoList待办事项列表_todolist案例资源-CSDN文库

5星 · 超过95%的资源 4 浏览量 2021-01-08 07:52:43 上传评论收藏 256KB PDF 举报

资源推荐

资源详情

资源评论

jQuery案例案例 —— todoList待办事项列表待办事项列表

案例时间案例时间

这个案例前几天就看了，一直没时间做，今天就把它做出来。这个案例是一个待办事项列表，可以记录自己当天需要做的事情，完成一件就画勾，要是不想要了就删除，可以很好的

督促自己完成每天的学习任务啊。看下效果吧。

当我第一次看到这个效果时，从局部出发，我的第一反应就是点击事件的删除和添加操作。但是看视频的时候老师做了需求分析，很仔细的分析了案例的效果，事实证明并没有我想

的那么简单。确实是添加删除元素的操作，只是对象变了，不是父元素创造元素再添加元素的步骤，而是对存储的操作，最后把存储中的数据渲染到页面。第一次听渲染这个词，

懂，也不懂。后来看完整个过程我简单的懂了渲染的意思。还是菜鸟一个。

数据存储格式数据存储格式

数据存储的格式数据存储的格式

var todoList = [{title:“123”,done:false},{title:“今天学习今天学习jQuery”,done:false}]

创造的元素里包含三部分：复选框、表单输入的内容、删除按钮。

但是我们存储数据的只需要两部分，就是复选框的状态和表单输入的内容。

在存储数据时，设置对象的两个属性：文本内容和复选框状态。默认复选框的状态是没选中的，因为新创建的元素是待办的。复选框选中（true）是再已完成部分，没选中（false）

是待办。

但是我们又会创造很多这样的元素，所以就把这些对象放到数组中存储，通过数组的索引号访问。

刷新页面数据不丢失刷新页面数据不丢失 —— 本地存储本地存储

刷新页面数据不丢失，说明我们的数据是存放在本地存储localStorage中的。

不管是当我们点击复选框、点击删除键还是在表单输入内容创建出来的元素，这些统统都是在本地存储中，页面中显示的数据都是从本地存储中取出来渲染的。

需要明白的是：本地储存的是字符串格式，我们需要存储的是数组对象格式本地储存的是字符串格式，我们需要存储的是数组对象格式。所以我们需要把数组对象格式转换为字符串格式存到本地存储，从本地存储取数据时再把字符串格式转

换为数组对象格式。

数组对象格式转为字符串格式：数组对象格式转为字符串格式：JSON.stringify(todoList)

字符串格式转为数组对象格式：字符串格式转为数组对象格式：JSON.parse(stringDate)

var toDo = [{

title: "123",

done: false

}, {

title: "今天学习jQuery",

done: false

}];

console.log(toDo);

console.log(toDo[0].title);

localStorage.setItem("todo", toDo);

console.log(localStorage.getItem("todo"));

var stringDate = JSON.stringify(toDo);

localStorage.setItem("todo2", stringDate);

console.log(localStorage.getItem("todo2"));

看眼输出就明白了，中间箭头指向的是字符串类型的数据，就是本地存储中存储的数据格式。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

丛乐

2023-07-26

这个文件的案例虽然不算特别创新，但是功能完善，能够满足一般需求。
艾闻

2023-07-26

这个案例的代码结构清晰，注释详细，方便后续修改和扩展。
乐居买房

2023-07-26

通过这个todoList案例，你可以更好地组织自己的工作，提高工作效率。
天使的梦魇

2023-07-26

这个文件提供了一个简单易用的todoList案例，让你可以更高效地管理待办事项。
白羊带你成长

2023-07-26

使用jQuery编写的这个案例，代码简洁易懂，非常适合初学者入门学习。

weixin_38631978

粉丝: 3
资源: 933

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip