cookie，localStorage，sessionStorage 的区别

cookie是在HTML4中使用的给客户端保存数据的，也可以和session配合实现跟踪浏览器用户身份；而webstorage（包括：localStorage和sessionStorage）是在HTML5提出来的，纯粹为了保存数据，不会与服务器端通信。

WebStorage两个主要目标：

提供一种在cookie之外存储会话数据的路径
提供一种存储大量可以跨会话存在的数据的机制

二、cookie 的特点
          只能使用文本文件
          文件有大小限制4K左右
          不可跨域
          时效限制（默认会话级，可指定)
          每次都会随着请求，发往服务器
          完全兼容
三、localStorage 的特点
          只能使用文本文件
          文件有大小5M左右
          不可跨域
          localStorage没有过期时间；sessionStorage只能会话级
          不会发往服务器
          低版本浏览器不兼容
          不安全、不能跨域、不能跨浏览器,写入的都是字符

四、相同点
          cookie，localStorage，sessionStorage都是在客户端保存数据的，存储数据的类型都是字符串，都不安全、不能跨域、不能跨浏览器。

五、不同点：

1. 有效期：
         cookie如果不设置有效期，那么就是临时存储（存储在内存中）是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失。
   localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
   sessionStorage仅在当前会话下有效。
   sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
   可以简单的理解为：sessionStorage就是没有设置有效期的cookie。
   如果说把cookie的有效期设置为永久（当然没有永久的事件），那么就是localStorage。

2. 网络流量
             cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，storage更加节约网络流量。

3. 大小限制
             cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M

4. 安全性
             WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。

5. 便携性
             cookie只提供了一个属性可供操作；而storage提供了一系列的API，操作方便快捷

六、语法

1. cookie
   // 设置
   let d = new Date();
   d.setDate(d.getDate()+3);
   document.cookie = ${key}=${value};expires=${d};path=/;domain=localhost;

// 获取，只能获取所有，需要配合字符串处理，才能拿到指定cookie
console.log(document.cookie)

// 删除，将有效期expires设置为过去的日期对象
          let d = new Date();
          d.setDate(d.getDate()-1);
document.cookie = ${key}=${value};expires=${d};path=/;domain=localhost;
          2. storag localstorage和sessionStorage的操作API一致，此处以localstorage举例

          localstorage.setItem(key, value); // 保存数据，以键值对的方式储存信息。
          localstorage.getItem(key); // 获取数据，将键值传入，即可获取到对应的value值。
          localstorage.removeItem(key); // 删除单个数据，根据键值移除对应的信息。
          localstorage.clear(); // 删除所有的数据，不推荐使用
          localstorage.key; // 获取指定key的value