发表于： 2017-07-12 23:46:17

登录之后，在其他页面怎么判断是否已经登录？
小课堂【武汉第169期】

1.背景介绍

登陆验证是网站的基本需求之一，通过登陆为用户展示特定的信息与页面，登陆验证可以保护用户的个人信息，避免遭到他人的篡改与破坏。

2.知识剖析

登陆验证的方法：

通过在登陆时记录一个数据，然后在需要进行登陆验证的页面比较此数据，若数据与登陆时记录的数据相符，则通过验证，否则不通过验证。这要求此数据是稳定的，不随url的变化而改变。即本地存储的方法。

常用的本地存储方法有4种:

1.Cookies：浏览器均支持，容量为4KB，默认生命周期为浏览器窗口，默认作用域为本目录
2.Session：服务器端的存储。
3.LocalStorage：HTML5，容量为5M,生命周期是永久，作用域为文档源级别，即同协议、同主机名、相端口。
4.SesstionStorage：HTML5，容量为5M,生命周期为当前标签页,作用域是标签页级别

3.常见问题

各种验证的使用方法？

4.解决方案

Cookies：

//设置cookie
document.cookie = 'name=xiaoyu'
//编辑cookie
document.cookie= 'name=desu'
//获取cookie某一项的值
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) {
console.log(document.cookie.match(reg));
return encodedURI(arr[2]);
} else {
return null;
}
}

Session进行的身份验证过程：

开启了Session支持的服务器在客户端开始会话的时候，生成一个SessionID，并且在响应（Response）头（Headers）中的Set-Cookie字段设置一个Cookie，Cookie的内容就是SessionID和Cookie的路径（path），在后继的会话中，客户端浏览器会自动附上Set-Cookie中的SessionID以向服务器表明身份，服务器根据SessionID在自己的存储中查找相关用户信息，并完成验证过程。
那么用户登陆的过程也就是用户对服务器提交用户名、密码等信息，获取SessionID的过程。

LocalStorage与SesstionStorage：
两者用法相同：

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据
sessionStorage.getItem('key');
sessionStorage.key;

// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');

// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

5.编码实战

6.扩展思考

各种存储的优缺点？

1.cookie始终在服务器和浏览器之间来回传送，明文传递，不够安全，且占用了带宽。数据大小受限，只有4kb，对cookie的操作也比较繁琐。
2.session保存在服务器端，数据安全。对数据的操作需要后端协助。
3.localStorage,永久存储且可存入大量数据，但如果数据过多，打开浏览器时会比较卡。
4.sessionStorage，生命周期和作用域都比较窄，这是优点也是缺点。

7.参考文献

1.参考一： href="https://segmentfault.com/a/1190000007506189">Javascript本地存储小结
2.参考二： href="http://blog.csdn.net/shuaishenkkk/article/details/8634917">
Session和Cookie的区别及Session的生命周期

8.更多讨论