localStorage，sessionStorage和cookie的介绍及区别

localStorage，sessionStorage和cookie的介绍及区别
1、localStorage
localStorage是HTML5规范中作为持久化保存客户端数据的方案， localStorage可以用于数据缓存，日志存储等应用场景
localStorage特征：
受同源策略的限制
存储空间一般都在5MB左右
键值对最终的存储形式是字符串
2、sessionStorage
会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空
3、cookie
实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上，当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据（页面用来保存信息）
cookie 只能作为临时存储，当了浏览器关闭，就会自动销毁
cookie作用域为当前域，有文件夹路径的区分，cookie是以域当中的文件夹来存储的
http：//www.jd.com/index.html：在这个域中任何文件都可以写cookie，存储的为宗旨都是以这个域作为存储空间的，别的域不能访问，
cookie的功能：在浏览器中进行数据的存储，用户名、密码
cookie存储的数据类新型：字符串
任何页面不能向本地存储文件
缺点：可能被禁用、是与浏览器相关的、可能被删除、安全性不够高
cookie的用法：
document.cookie = “name=”mcy””;
会将key相同的值覆盖掉
存储cookie数据，

var obj = getCookie();
    console.log(obj)
    function getCookie() {
      return document.cookie.split(/;\s*/).reduce((value, item) => {
        // console.log(item.match(/([^=]+)=([^=]+)/).slice(1));
        var arr = item.split("=");
        value[arr[0]] = isNaN(arr[1]) ? arr[1] : Number(arr[1]);
        return value;
      }, {})
    }

获取cookie数据：document.cookie
使用cookie：
1、刷新页面时可以使用
2、跳转到当前域所在另外页面时可以获取前面cookie存储的数据内容
cookie可以设置过期时间：
一、

var date=new Date();
      date.setMinutes(6);
      document.cookie="name=xietian;expires="+date.toUTCString();

二、

var date=new Date();
  date.setMinutes(15);
  Utils.setCookie("price",300,date);

如何删除以及设置了过期失效的cookie

Utils.setCookie("password","",new Date());
Utils.setCookie("user","",new Date());

clearCookie 清除所有cookie
getCookie 获取所有cookie

如果删除以及设置了过期失效的cookie

Utils.setCookie("password","",new Date());
Utils.setCookie("user","",new Date());

cookie的生存期*：
在默认情况下，cookie是临时存在的。在一个浏览器窗口打开时，可以设置cookie，只要该浏览器窗口没有关闭，cookie就一直有效，而一旦浏览器窗口关闭后，cookie也就随之消失。如果想要cookie在浏览器窗口之后还能继续使用，就需要为cookie设置一个生存期。所谓生存期也就是cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该cookie。一旦终止日期到达之后，该cookie将会从cookie文件中删除。

localStorage、sessionStorage与cookie的区别
（1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
（2）存储大小限制也不同
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
（3）数据有效期不同
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持； cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
（4）作用域不同
localStorage 在所有同源窗口中都是共享的；
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
cookie也是在所有同源窗口中都是共享的。
（5）通信
localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存
sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存
cookie：十种携带在同源的http请求中，即使不需要，故cookie在浏览器和服务器之间来回传递；如果使用cookie保存过多数据会造成性能问题
（6）易用性
cookie：需要自己进行封装，原生的cookie接口不够友好
sessionStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持
localStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持