详解cookie，session和webStorage

cookie: 属于http协议的一部分；也不是客户端也不是后端;
session ： 后端会话一种机制；
webStorage又分为两种：localStorage（本地存储）和
sessionStorage（会话存储）

1、localStorage : 本地存储

场景： 在页面A中有一个值需要传递给页面B，页面每形成一个都会有一个单独的全局作用域window；全局变量在页面之间也不能互相访问；如果需要进行数据共享，只能通过再次请求服务器来实现共享；

页面与页面之间该如何进行通信；

localStorage: 永久性存储；存储到了电脑的硬盘和内存中；

1. 当关闭页面或者是浏览器时，存储的内容不会消失；
2. 如果属性名重名，那么后面的会将前面的覆盖；
3. 存储大小一般小于5M；
   4.value 会自动调用toString执行，返回再存储到本地

localStorage设置方法

（1）.设置localStorage中的值

    localStorage.setItem("table",18);
    localStorage.setItem("cup",[10,78,9]);

（2）. 获取localStorage中的值

   let val = localStorage.getItem("table");
    console.log(val);    //"18"

（3） 删除某一个key值 removeItem

  localStorage.removeItem(key);

（4）. localStorage.clear : 清空所有的key和value;

 localStorage.clear();

2、sessionStorage：会话存储

sessionStorage：会话存储:
只在当前页面中可以获取；不能在页面之间进行通信；会话存储；当关闭浏览器或页面时，存储自动消失；

sessionStorage设置方法

（1）.设置sessionStorage中的值

   sessionStorage.setItem(key,value)

（2）. 获取sessionStorage中的值

  sessionStorage.getItem(key)

（3） 删除某一个key值 removeItem

 sessionStorage.removeItem(key)

（4）.sessionStorage.clear : 清空所有的key和value;

sessionStorage.clear();

3、cookie

为什么要有cookie?
http是没有状态的；当用户登录之后，服务器没有办法判断当前是登录过还是未登录状态；所以http发明了cookie,cookie是http的一部分；http是传输在前端后端的一种传输协议；但是后端可以设置修改cookie；前端可以获取到cookie；
前端每次发请求，都可以把cookie携带到请求头中；
以登录为例： 当点击登录时，请求把用户名和密码发送给服务器，服务器会进行用户名和密码的校验，如果校验成功，在后端会调用set-cookie生成一个cookie，并且后端把cookie种到了前端；以后前端发送的所有的请求都会携带当前这个cookie;这个cookie就包含了状态，判断是否登录，判断是否过期；还有一些用户的信息等等；

cookie设置方法

（1）设置cookie

document.cookie="aaa=123";

（2）expires: 设置过期时间

document.cookie="aaa=123";
let data = new Date(new Date().getTime() + 5000);
document.cookie="deng=789; expires="+ data.toUTCString();

上图是刚加载出来的结果，等5s之后刷新，第二条会不见，即为过期
（2）获取cookie

console.log(document.cookie);

4、session

session ： 是服务器一种存储的信息的机制；服务器为了防止cookie不安全性，发明session的方式；session不会发送给客户端；

当登录时，前端先把用户名和密码发送给服务器，服务器会生成session文件，这个session文件存储了当前用户的信息以及登录的状态，同时还会生成一个session-id,而且session-id会进行加密操作，服务器把session-id写入cookie，一并发送给客户端；当客户端再次发送请求时，会携带着cookie,cookie含有session-id;服务器把根据解析出来session-id去session文件去查看当前的状态，用户的信息等，如果能匹配完整，那么就继续下面的请求操作；

cookie和session的区别

1、保持状态：cookie保存在浏览器端，session保存在服务器端

2、使用方式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

原因如下：（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；

（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；

（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。

（4）sessionID是加密的

（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

6、应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

（2）保存上次登录的时间等信息。

（3）保存上次查看的页面

（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

（1）网上商城中的购物车

（2）保存用户登录信息

（3）将某些数据放入session中，供同一用户的不同页面使用

（4）防止用户非法登录

7、缺点：cookie：

（1）大小受限

（2）用户可以操作（禁用）cookie，使功能受限

（3）安全性较低

（4）有些状态不可能保存在客户端。

（5）每次访问都要传送cookie给服务器，浪费带宽。

（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。