cookie localStorage sessionStora

Cookie

http协议本身是无状态的，对于浏览器的每一次请求，服务器都会独立处理，请求之间没有关联，为了让服务器识别出对应的浏览器，对应的用户，需要服务器和浏览器共同维持一个状态，这就是会话机制（浏览器和服务器在多次请求间共享数据的过程称为会话跟踪技术）。（认为一段时间内，使用同一个浏览器的是一个用户）。存储形式是键值对，存储于访问者的计算机中的一小块数据，一般是4KB。可以由Javascript进行操作。
每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
也就是说，cookie 是不需要我们手动设置，就会自动在 客户端 和 服务端之间游走的数据
与Cookie相关的http头：

1. Set-Cookie，由服务器发送，放在响应头中，用于在客户端创建一个Cookie
2. Cookie，由客户端发送，放在请求头中，只有cookie的domain和path与请求url匹配才会发送

特点

1. 有时效性，一般是浏览器关闭就过期（不设置过期时间，cookie会保存在内存中，生命周期随着浏览器的关闭结束，这种称为会话cookie；设置了过期时间，cookie保存在硬盘中，关闭浏览器后，若不到过期时间，就仍然存在）
2. 有大小限制，一般是4KB
3. 有数量限制，一般是50条左右
4. 有域名限制，同源策略，哪个域名下的cookie，只能在哪个域名下访问
5. 每次请求都要携带，浪费带宽

应用场景

1. 管理登陆状态（关闭浏览器重新打开仍然可以直接登陆，保存上次登录的时间，保存上次查看的页面，浏览计数）
2. 个性化设置
3. 浏览器行为跟踪，分析用户行为，广告推送

缺点

1. 可能被禁用 被删除
2. 存储空间很小
3. 安全性不高

前后端如何交互cookie

当一个请求发起时，会先去看cookie空间中是否有内容，有的话，请求会自动携带cookie空间中的内容到后台。后台response时，如果之前的request有cookie，也会携带回来。后台也可以主动设置cookie

设置cookie

若cookie设置了httpOnly，则javascript不能操作。

1. 读取

function getCookie(key) {
  const cookieAttr =     document.cookie.split(';');
  cookieArr.forEach(item => {
    if(item.split('=')[0] === key) {
     return item.split('=')[1]
    }
  }
}

1. 添加

document.cookie = 'a=100;expires=Thu, 18 Dec 2043 12:00:00 GMT';
// 设置一个cookie，它将在2043年12月18日12点以后过期，过期后自动删除

3. 删除
   将某一个cookie的过期时间设置成当前之间之前

Session

上面已经提到cookie是保存在浏览器端，而session是保存在服务器端。
session对象服务端会在用户访问网站之后主动创建（若客户端请求携带sessionId，则不需要重新创建），并且把sessionId返回给客户端。
sessionId一般是放在cookie中返回，但如果客户端禁用了cookie，那就重写URL将sessionId拼接到访问地址后。

应用场景

个人认为，大部分情况是用于保存比cookie更加隐私的用户信息

1. 购物车
2. 登陆信息

特点

1. 大小不受限制
2. 安全性更高，如果cookie没有禁用，那么攻击session就要先攻击cookie；session一旦结束，攻击了cookie也没用了；session重新启动，生成新的id，之前的sessionID也没用了；sessionID是加密的;
   session数据包不可伪造，cookie可伪造
3. 如果是高并发，会增加服务器的压力

WebStorage

sessionStorage和localStorage是HTML5新增的两种本地存储机制，主要目的是克服cookie的一些限制，当数据需要严格存储在客户端时（比如上次登录时间，访问过的页面），不需要持续的将数据发送给服务器。存储数据大小一般都是5MB。只能存储字符串类型。
WebStorage提供了方便的数据操作API setItem(key, value) getItem(key) removeItem(key) clear() key(index)

localStorage

localStoarge的生命周期是永久的，关闭页面或浏览器数据也不会消失，除非主动删除数据。

sessionStorage

sessionStorage的生命周期是仅在当前会话下有效。
sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。