大家好，我是IT修真院北京分院第19期的学员杨超，一枚正直纯洁善良的前端程序员
1.背景介绍
登录功能，是前端经常要完成的需求之一。
但是如何进行登录判断？
需要用到什么样的属性或者方法？
2.知识剖析
Web Storage
WebStorage是HTML5中本地存储的解决方案之一
Web Storage实际上由两部分组成:sessionStorage与localStorage。
localStorage和sessionStorage
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。
所以，在其它页面保持登录，可以在登录后往本地storage中存储一个关键字段（存储用户信息）,如 :login：true
在路由变化的时候，或者在页面跳转的时候，检测是该字段值是否正确，不正确则跳转登录页；
点击注销可以执行删除
3.常见问题
为什么不用cookie？
4.解决方案
COOKIE怎么了？
1. 数据大小：作为存储容器，cookie的大小限制在4KB左右。
2. 安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的。
3. 网络负担：我们知道cookie会被附加在每个HTTP请求中，在HttpRequest和HttpResponse的header中都是要被传输的， 所以无形中增加了一些不必要的流量损失。
5.编码实战
新建一个sessionStorage：sessionStorage.login=false;
storage、cookie的设置与获取
getItem(key):获取指定key本地存储的值
setItem(key,value)：将value存储到key字段
removeItem(key):删除指定key本地存储的值
如此设置，先设置好一个sessionStorage，然后在每个页面判断这个数据，就实现了判断登陆状态。
6.扩展思考
WEB STORAGE相对于COOKIE的优势
1.从容量上讲WebStorage一般浏览器提供5M的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣
2.安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全。
3.从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省。
7.参考文献
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
8.更多讨论
还有其他的本地存储方案吗？各自的性能如何？
视频地址：https://v.qq.com/x/page/n05085w5zuo.html
ppt地址：https://ptteng.github.io/PPT/PPT/js-06%20login.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：84150319，或者你可以直接点击此链接：http://www.jnshu.com/login/1/84150319
