cookie

一、cookie技术

会话跟踪技术。

由于http协议无法记录用户信息，使用cookie来存储身份信息。

cookie就是浏览器端的身份标识，cookie会在请求头中自动携带。

一套协议域名端口对应一套cookie。

cookie存储在当前浏览器独立创建的本地文件夹中。

二、cookie的特点

1、cookie里面存储的信息是纯文本形式的

2、cookie里面存储的信息是有大小限制的

• 最大值为4kb
• 最大条数不能超过50

3、cookie是有时效性的

• 默认是会话级别时效 session
• 可以手动设置过期时间

4、cookie必须是同域名、同协议、同端口号的的页面才能访问

• 每个服务器都有一个独立的域名，我们通过协议+域名+端口来对服务器进行查找
• 每个服务器给前端的身份标识是不一样的
• 浏览器通过协议+域名+端口作为key 值，cookie作为value，实现映射结构的数据存储

5、cookie是有安全限制的

• 以文件夹为单位的父子级包裹形式，决定了cookie的可访问性

三、前端操作cookie

cookie的所有特征都是用字符串去描述的

前端设置cookie，只有document.cookie 可以进行操作

1、设置cookie

1. cookie属性和属性值得设置语法： “cookie名=cookie值”

docuemnt.cookie=“username=123456”

2. domain一般不设置
3. path设置
   cookie设置时一条cookie的所有信息都放在同一个字符串中
   每条数据之后要用 ; 进行间隔
   不同path的cookie不是同一条cookie

document.cookie=“username=123456;path=/”
path: / WWW目录下的所有文件夹都可以访问

4. 设置过期时间 expires
   我们在设置cookie过期时间的时候都会先设置一个我们希望的过期时间的日期对象

//设置7月1日过期
var date=new Date();
date.setMonth(6);
date.setDate(1);
//设置10天之后过期的日期
date.setDate(date.getDate()+10)
document.cookie=“username=123456;path=/;expires=”+date;

2、cookie的获取

console.log(document.cookie)

获取所有的cookie key=value,取出的所有cookie都用 ;空格 进行间隔

四、前端cookie封装

设置cookie

设置前端cookie的信息：
必选参数：key value
可选参数：path domain expires

    function setCookie(key,value,options){
      //设计参数：
      //把多个可选参数集中成一个对象

      //判断参数是否安全
      options = options || {};
      if(typeof options.expires === "number"){
        var d=new Date();
        d.setDate(d.getDate()+options.expires);
      }
      return document.cookie=[
        key+"="+value,
        typeof options.path==="string"? "path="+options.path : "",
        typeof options.domain==="string" ? "domain="+options.domain : "",
        typeof options.expires==="number" ? "expires="+d : ""
      ].join("");
    }

删除cookie

    function removeCookie(name,path){
      var options={expires:-1};
      //path参数可以是字符串，也可以是参数
      switch(typeof path){
        case "string": options.path= path;break;
        case "object": 
          if(path!==null && path instanceof Array){
            Object.assign(options,path);
          }
          break;
      }
      return setCookie(name,null,options);
    }

读取cookie

想要获取cookie的value，我们要先知道cookie的key

方法：先把cookie拆分开，然后再把拆分后的每条cookie拆分成key 和 value

    function getCookie( key ){
      //拆分每一条数据
      var cookieArray=document.cookie.split("; ");
      //遍历数组，再次拆分
      cookieArray.forEach(function(item){
        var cookieItemArray=item.split("=");
        if(key=cookieItemArray[0]){
          return cookieItemArray[1];
        }
      })
      return "";
    }