【北京分院一百二十五期】登录之后，在其他页面怎么判断是否已经登录？

大家好，我是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.参考文献

HTML5 WebStorage

请描述一下 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