特性 Cookie localstorage sessionStorage
数据的生命周期 一般由服务器生成，可设置失效时间，如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或者浏览器后被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
与服务端通信 每次都会携带在HTTP头部，如果使用cookie保存过多数据会带来性能问题 仅在客户端中保存，不参与和服务器的通信
易用性 需要开发人员自己封装，原生的Cookie接口不太友好 原生接口可以接受，也可以再次封装来对Object和Array有更好的支持

设置localstorage过期时间

  1. class Storage{
  2.         constructor(name){
  3.             this.name = 'storage';
  4.         }
  5.         //设置缓存
  6.         setItem(params){
  7.             let obj = {
  8.                 name:'',
  9.                 value:'',
  10.                 expires:"",
  11.                 startTime:new Date().getTime()//记录何时将值存入缓存，毫秒级
  12.             }
  13.             let options = {};
  14.             //将obj和传进来的params合并
  15.             Object.assign(options,obj,params);
  16.             if(options.expires){
  17.             //如果options.expires设置了的话
  18.             //以options.name为key，options为值放进去
  19.                 localStorage.setItem(options.name,JSON.stringify(options));
  20.             }else{
  21.             //如果options.expires没有设置，就判断一下value的类型
  22.                    let type = Object.prototype.toString.call(options.value);
  23.                    //如果value是对象或者数组对象的类型，就先用JSON.stringify转一下，再存进去
  24.                 if(Object.prototype.toString.call(options.value) == '[object Object]'){
  25.                     options.value = JSON.stringify(options.value);
  26.                 }
  27.                 if(Object.prototype.toString.call(options.value) == '[object Array]'){
  28.                     options.value = JSON.stringify(options.value);
  29.                 }
  30.                 localStorage.setItem(options.name,options.value);
  31.             }
  32.         }
  33.         //拿到缓存
  34.         getItem(name){
  35.             let item = localStorage.getItem(name);
  36.             //先将拿到的试着进行json转为对象的形式
  37.             try{
  38.                 item = JSON.parse(item);
  39.             }catch(error){
  40.             //如果不行就不是json的字符串，就直接返回
  41.                 item = item;
  42.             }
  43.             //如果有startTime的值，说明设置了失效时间
  44.             if(item.startTime){
  45.                 let date = new Date().getTime();
  46.                 //何时将值取出减去刚存入的时间，与item.expires比较，如果大于就是过期了，如果小于或等于就还没过期
  47.                 if(date - item.startTime > item.expires){
  48.                 //缓存过期，清除缓存，返回false
  49.                     localStorage.removeItem(name);
  50.                     return false;
  51.                 }else{
  52.                 //缓存未过期，返回值
  53.                     return item.value;
  54.                 }
  55.             }else{
  56.             //如果没有设置失效时间，直接返回值
  57.                 return item;
  58.             }
  59.         }
  60.         //移出缓存
  61.         removeItem(name){
  62.             localStorage.removeItem(name);
  63.         }
  64.         //移出全部缓存
  65.         clear(){
  66.             localStorage.clear();
  67.         }
  68.     }