Cookie、Session和LocalStorage

前记

前面我已经写了一篇关于Cookie的文章，可是那时候我其实理解的并非很深入，会有些搞不懂的地方，今天我就再写一次，博客也是个人学习笔记

Cookie

Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。一般，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登陆状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie如何设置

Cookie的设置是在服务端来操做的，用户访问服务器，服务器响应中响应头带上

response.setHeader('Cookie', 'Max-Age=<non-zero-digit> ')//设置过时时间

Cookie的特性

1. Cookie的默认是随着用户关闭时过时，可是服务器能够设置Cookie的使用时间还有过时时间
2. Cookie能够设置HttpOnly来使用户不能经过JS来操做Cookie，HttpOnly类型的Cookie在必定程度上缓解XSS类攻击。
3. 标记为 Secure 的Cookie只应经过被HTTPS协议加密过的请求发送给服务端。

Cookie的缺陷

就像上面Cookie的特性中的二、3条说的，Cookie并不安全，由于Cookie若是包含着重要信息被人记录或者篡改，那就能够对用户的帐户进行操做，因此为了改善这一个问题，就要用到接下来讲的Session

Cookie总结

一、服务器经过Set-Cookie头给客户端一串字符串
二、客户端每次访问相同域名的网页时必须带上这段字符串
三、客户端要在一段时间内保存这个Cookie
四、Cookie默认在用户关闭时过时，后台能够设置Cookie存在时间
五、能够在控制台的Application中强制删除Cookie

Session

Session并非HTTP协议中的一部分，Session是一个抽象的概念，是用来解决Cookie来标识用户而泄漏隐秘信息的一种方法，而且由于实现了中断和继续操做而叫‘会话’

Session的实现

1. 服务器经过Cookie给用户一个SessionId
2. SessionId对应着服务器中的一小块内存，这块内存存着用户的隐秘信息
3. 每次用户访问服务器的时候，服务期就经过SessionId去读取对应的内存，就知道了用户的隐秘信息

Session的缺陷

从上面能够看出，Session最大的缺陷就是占服务器的内存

Session的总结

一、将SessionId（通常就是一个随机数）经过Cookie发给客户端
二、客户端访问服务器时，服务器读取SessionId
三、服务器有一块内存（对象）保存了全部的Session
四、痛殴SessionId咱们能够获得对应用户的隐私信息，如id，email
五、这块内存（哈希）就是服务器上的Session

Session不使用Cookie的实现方法

1. 不写Cookie，将SessionId返回给JS，经过JSON返回给前端
2. 前端拿到这个响应将其变成对象
3. 将这个SessionId存到LocalStorage中
4. 页面跳转登陆后，将SessionId写到查询参数中，后台经过查询参数知道当前的SessionId
5. 而后经过SessionId去Session中查找出用户的信息

Session和Cookie的区别

从上面的内容中就能够发现，Session和Cookie的区别很大
首先Cookie是HTTP协议中的一部分，而Session是一个抽象的概念
而后Session是存放在服务器的内存中，而Cookie是存放在本地
最后Session通常是依赖于Cookie的，SessionId是经过 Cookie 发送给客户端的

LocalStorage

LocalStorage是HTML5提供的新的API，LocalStorage也是一个哈希，是一个存在浏览器上的哈希

LocalStorage的使用方法

用户设置的使用方法

localStorage.setItem('a', '1')

用户如何获取存的对象

localStorage.getItem('a')

用户如何清理

localStorage.clear()

LocalStorage的总结

1. LocalStorage跟HTTP无关
2. 只有相同域名的页面才能互相读取LocalStorage（没有同源那么严格）
3. 每一个域名的LocalStorage最大存储量为5M左右（由浏览器决定）
4. 经常使用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
5. LocalStorage存储的信息永远有效，除非用户清除

SessionStorage和LocalStorage的区别

一、二、三、4条同上，可是SessionStorage在用户关闭页面后就失效了

LocalStorage和Cookie的区别

从上面也能够看出

1. LocalStorage 不会随 HTTP 发给 Server
2. LocalStorage 的大小限制比 Cookie（4K） 大多了

LocalStorage存在的缘由

因为历史遗留问题，之前全部信息都放到Cookie中，可是每次请求都要带上Cookie，所以会上传不少无用的东西，影响速度，所以做为一个前端不要读写Cookie

想说的话

正式学习前端已经快三个月了，一步步深刻就总感受本身学的不够，本身很垃圾，可是幸亏我能感受到我有东西能够学，因此，在没学完的那一刻，我是不会停下来的，加油