cookie

cookie是浏览器提供的一种机制，可以由JavaScript对其进行操作(设置、读取、删除)
cookie是一种会话跟踪技术，是存储于访问者计算机中的一小块数据

cookie的组成部分：
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]
必选项：name和value
可选项：后面中括号（这里的中括号是我加的）里面填写的参数。

细节：
火狐浏览器支持本地缓存cookie
谷歌浏览器不支持本地缓存cookie，谷歌浏览器想要缓存cookie
必须使用http或者https协议加载，必须通过服务器缓存cookie。

【注】如果大家想要设置中文不乱码，我们可以通过编码进行存储，通过解码进行读取。
encodeURIComponent 将中文编码成字符
decodeURIComponent 将字符解码转成中文

设置cookie
document.cookie = ‘username=xhw’;
获取cookie
alert(document.cookie);

expires 过期时间
设置cookie的过期时间的，赋值必须是日期对象，如果过期，系统会自动清除过期的cookie。
主动删除cookie，只需将cookie时间设置成过去的时间即可·。
【注】如果不设置这个值，默认是"会话"，一次会话(打开浏览器-关闭浏览器)
设置cookie有效期：

//封装函数，获取n天后的时间
   function afterOfDate(n){
       var d = new Date();
       var day = d.getDate();
       d.setDate(day + n);
       return d;
   }

document.cookie=“username=xhw; expires=”+afterOfDate(n); // n等于有效期天数
删除cookie：
document.cookie = ‘username=;expires=’ + new Date(0);

path 限制访问路径
如果不去设置，默认就是当前文件加载的路径。
如果设置的cookie的路径，和实际加载文件的路径不一致，禁止访问cookie。

domain 限制访问域名
如果不去设置，默认就是当前加载文件的主机名。
设置的域名和，加载文件的域名不一致的话，连cookie都加载不成功。

secure
设置安全，默认是false
【注】只支持通过https协议加载页面，去设置cookie。
【注】https协议的域名，最好是可以去买一个现成的，阿里云。

cookie特点：
1、最大只有4kb
2、数据有限制，一个域名下，最多只能存储50条数据
3、有时效性，可以设置过期时间
4、有域名的限制，你设置谁能读取，才能读取

cookie的缺点
1.cookie可能被禁用
2.cookie与浏览器相关，不能互相访问
3.cookie可能被用户删除
4.cookie安全性不够高
5.cookie会随着HTTP请求发送给服务器
6.cookie存储空间很小(只有4KB左右)
7.cookie操作麻烦，没有方便的API

cookie应用场景

• 会话状态管理（如用户登录状态、购物车等）
• 个性化设置（保存用户设置的样式等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

cookie的封装
为了我们操作cookie以后可以方便一点，我们可以针对于cookie的操作进行封装函数。

setCookie() 设置cookie

function setCookie(name, value, {expires, path, domain, secure}){
       //1、拼接字符串
       var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);
       //2、判断可选项是否存在
       if(expires){
           cookieStr += ";expires=" + afterOfDate(expires);
       }
       if(path){
           cookieStr += ";path=" + path;
       }
       if(domain){
           cookieStr += ";domain=" + domain;
       }
       if(secure){
           cookieStr += ";secure";
       }
       //3、将字符串设置cookie
       document.cookie = cookieStr;
   }
   //封装函数，获取n天后的时间
       function afterOfDate(n){
           var d = new Date();
           var day = d.getDate();
           d.setDate(day + n);
           return d;
       }

getCookie() 通过name获取对应的值

 function getCookie(name){
          var cookieStr = decodeURIComponent(document.cookie);
          //1、先去查找这个name第一次出现的位置
          var start = cookieStr.indexOf(name + "=");
          if(start == -1){
              return null;
          }else{
              //2、找结束的位置
              var end = cookieStr.indexOf(";", start);
              if(end == -1){
                  end = cookieStr.length;
              }
              //通过start和end这两个部分，去提取对应的键值对
              var str = cookieStr.substring(start, end);
              var arr = str.split("=");
              return arr[1];
          }
      }

removeCookie() 删除cookie

function removeCookie(name){
   document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}

通过一个函数，将上述三个函数功能合体

function $cookie(name){
    switch(arguments.length){
        case 1:
            return getCookie(name); //获取cookie
            break;
        case 2:
            arguments[1] == null ? removeCookie(name) : setCookie(name, arguments[1], {});
            break;
        case 3:
            setCookie(name, arguments[1], arguments[2]);
            break;
        default:
            break;
    }
}