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的特性中的2、3条说的，Cookie并不安全，因为Cookie如果包含着重要信息被人记录或者篡改，那就可以对用户的账户进行操作，所以为了改善这一个问题，就要用到接下来说的Session

Cookie总结

1、服务器通过Set-Cookie头给客户端一串字符串
2、客户端每次访问相同域名的网页时必须带上这段字符串
3、客户端要在一段时间内保存这个Cookie
4、Cookie默认在用户关闭时过期，后台可以设置Cookie存在时间
5、可以在控制台的Application中强制删除Cookie

Session

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

Session的实现

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

Session的缺陷

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

Session的总结

1、将SessionId（一般就是一个随机数）通过Cookie发给客户端
2、客户端访问服务器时，服务器读取SessionId
3、服务器有一块内存（对象）保存了所有的Session
4、痛殴SessionId我们可以得到对应用户的隐私信息，如id，email
5、这块内存（哈希）就是服务器上的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的区别

1、2、3、4条同上，但是SessionStorage在用户关闭页面后就失效了

LocalStorage和Cookie的区别

从上面也可以看出

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

LocalStorage存在的原因

由于历史遗留问题，以前所有信息都放到Cookie中，但是每次请求都要带上Cookie，因此会上传很多无用的东西，影响速度，因此作为一个前端不要读写Cookie

想说的话

正式学习前端已经快三个月了，一步步深入就总感觉自己学的不够，自己很垃圾，但是幸好我能感觉到我有东西可以学，所以，在没学完的那一刻，我是不会停下来的，加油

来源：https://segmentfault.com/a/1190000016068840