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某一项的值

functiongetCookie(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.参考一：Javascript本地存储小结

2.参考二：Session和Cookie的区别及Session的生命周期

8.更多讨论

1.如何选取本地存储：

根据特性使用，若需要永久存储，则选择localStorage，若需要关闭网页就销毁数据，则选择sessionStorage

2.完全没必要用Cookie吗？

不是，虽然cookie有着诸多缺点，但cookie也有许多不可替代的特性，比如可以灵活的设置过期时间，也可以设置作用域。能在服务器和客户端进行数据交互。

3.WebStorage的数据可以上传到服务器吗？

Webstorage不会传递到服务器端，且webStorage就是为了解决cookie频繁在服务器和客户端交互的弊端而设，webstorage就是为了在客户端存储数据而生，不应舍本逐末。