这是我参与「第四届青训营 」笔记创作活动的的第10天，今天主要记录的内容是完成前端项目-TodoList需要掌握的开发小技巧,算是一个小小的前导课，今天主要学习的是JavaScript部分，希望大家读了本文有所收获，可以独立开发Todolist小程序的逻辑部分.
一、涉及到的知识点
HTML基本标签使用
CSS基本属性使用
JavaScript基本语法
二、学完后的收获
Html框架搭建
@media screen自适应框架
一键到顶部锚链接（平滑）
JavaScript浏览器缓冲技术
JavaScript中json数据与数组转换
三、实战环节
基础html、css实战在昨天的文章中，今天主要学习JavaScript部分.
Javascript在浏览器中的缓存
在浏览器中的缓冲和物理意义上的缓冲不太一样!!!在浏览器中缓冲的作用是为了存储一些信息，方便事后使用，比如一个听歌网页需求是：要求在每个用户听歌听到一半推出网页,下次访问网页可以自动播放上次未播放完的音乐，并且不想占用服务器资源，这个时候就是使用本地浏览器缓冲的最佳时机，同时在Todolist中也需要使用本地浏览器缓冲技术将要做的事情以及已经做的事情保存到本地缓冲中，既然我们明白了缓冲的重要性，以及使用场景，那我们一起看看如何使用本地浏览器缓冲吧！！！ 在本地缓存中里有俩中技术：localStorage、sessionstorage 当然二者一定有区别：localStorage主要用于我们存储长期的信息只要浏览器在，你所保存的数据一直在，不会根据浏览器关闭或者时间推移丢是数据，比较好用！！sessionStorage技术主要用于短期是数据保存存储，比如说单机游戏记录生命状态，比如说正在打魂斗罗打到20关了，你退出模拟器你所在的关卡以及血量都没了，所以接下来看看如何使用localStroage和sessionStorage吧..
localStorage技术
存储数据
键值对:localStorage.setItem('name','student'); 直接赋值：localStorage.age = 22 上述俩种方法都可以将信息存储到本地.
读取数据
读取数据对应也有俩种常用办法 根据键名取value：localStorage.getItem('name') 属性取值：localStorage.age
删除数据
删除数据也有俩种方法，键值对删除法
所以数据一键删除，使用localStroage.clear()
修改数据
其实修改数据跟新增数据用法一样，可以直接使用新增的方法进行修改数据。如果localStorage缓冲中没有要修改的数据就默认新建数据，如果有就等于修改数据了
sessionStorage缓冲
因为localStorage和sessionStorage俩着技术完全一样，只是有效期不一样，所以使用方法大同小异，读者可以自行根据下述代码联系.俩者增删改查的方法基本如下，todolist主要使用的是local Storage，本小节为选读内容.
上述为本地浏览器缓冲技术.
JavaScript中json数据与数组转换
由于Todolist核心有todolist和donelist俩个数组，将要做的事情和已经做的事情. 想要将数组直接存入localStorage中会出现意想不到的错误，大家可以试试，不过出现这个错误也可以通过字符串分割重建数组解决，不过那样太麻烦，并且代码量大，这里不推荐，所以看看我们如何解决这一问题，为了文章简洁易懂，我在这里将出错地方写出来了.
通过上述看到本地化数据本地化的时候是正确的，但是读出来却是错误的，并不是存数组读数组而是读出字符串来，不方便我们操作，所以仔细看下面操作.
数组本地化之前需要使用JSO模块中的strinify函数将数组字符化,
语法：localStorage.array = JSON.stringify([1,2,3,4,5])读取本地化的数组new_arr接收,JSON模块的parse函数还原数组
语法:var new_arr = JSON.parse(localStorage.array)
扩展部分: 使用localstorage对象本地化-》读取,当然也是可以的下面看操作.
可以明显看到我们通过localStorage技术将JavaScript中的对象也序列化保存到了本地中，当然，使用sessionStorage也是可以的，希望大家有所收获.
四、引用文献
None
五、总结
希望读者可以掌握并熟练使用本文提到的俩个知识点，并且可以举一反三，在自己的项目中使用该技术，如果看了文章还有不懂的地方欢迎各位留言，我看到第一时间回复大家.
