十分钟了解cookie，成为大神不是梦

一、首先我们了解什么是http协议和cookie。

传输协议：http协议：超文本传输协议，传输html，网页，网页传输协议，记不住状态的协议。
传输的规则：双方要进行信息的传输时，要遵守的规定或约定。大致分为三步：
1、建立连接通道
2、相互通信
3、关闭通道。
http：安全性不高
https：加密传输协议

二、会话跟踪技术cookie：跟踪每一次的连接，记录连接产生的信息，下次连接，跟着一起发送过去
cookie会随着http协议，发往服务器，其实cookie自身，是一种本地存储。

2.1 特点：
        1.只能存字符，文本；
        2.不允许跨域（谁存的，谁用）；
        3.时效性，默认会话级，关闭浏览器，可以删除；
        4.数量（50左右）和大小（4K）限制。

2.2 密钥：加密的账号或密码
        加密(admin123)
        md5
        token：令牌，暗号
2.3 安全问题：cookie中所有的内容，因为都是存在本地的文本，所以都是明文，只要能看到你的本地，就有可能看到你的cookie，所以在项目中千万不要在cookie中直接存账号密码，如果可以避免安全问题，或者是个人电脑就可以存。

2.4 cookie如何使用：
        cookie自身是document对象的一个属性
        使用：document.cookie

2.5 cookie的规则：要设置的cookie
            document.cookie = 要设置的cookie
            1.必须是字符：""
            2.字符内的格式要求：名=值，如："user=admin"
            3.一条代码只能设置一条cookie
            4.设置cookie时，可以配置信息要求
                有效期："expires=日期对象"
                路径："path=/page"
            5.cookie的内容和每个配置信息之间用：";"连接

 2.6 设置cookie的语法：
            默认cookie
            document.cookie = "user=admin";

  设置具有有效期的cookie（3天之后）
            var d = new Date();
            d.getDate();获取当前当月天数
            d.setDate(d.getDate() + 3); //获取指定日期
            document.cookie = "abc=123;expires="+d;
            
            设置具有路径的cookie（3天之后）
            document.cookie = "abc=123;path=/page";

            设置具有路径和有效期的cookie（3天之后）
            var d = new Date();
            d.setDate(d.getDate() + 3);
            document.cookie = "abc=123;path=/page;expires="+d;

 2.7 删除cookie：通过有效期，让这个cookie过期，怎么能过期？当前设置曾经的日期。

        查cookie：
            var str = document.cookie

 2.8 cookie工作场景：
        cookie自身其实对工作环境没有要求，但是cookie会随着http发往服务器，使用cookie的时候，是不需要记录客户端和服务器之间的信息。客户端是浏览器，服务器是本地服务器，所以导致，cookie最好也在服务器环境中使用。

三、cookie的简单封装：

   function setCookie(key,val,ops){
        // ops有可能为的值：
            // undefined
            // {}
            // {expires:3}
            // {path:"/"}
            // {expires:3,path:"/"}
        // 处理的是为undefined时
        ops = ops || {};
        // 处理有效期
        let e = "";
        if(ops.expires){
            var d = new Date();
            d.setDate( d.getDate() + ops.expires );
            e = ";expires="+d;
        }
        // 处理路径
        // let p = "";
        // if(ops.path){
        //     p = ";path="+ops.path;
        // }
        let p = ops.path ? ";path="+ops.path : "";
        document.cookie = `${key}=${val}${p}${e}`;
    }

例如下面这个案例：先创建几个cookie，保存后，我们把这几个cookie注释掉，看结果：

 // setCookie("qwe","123");
   // setCookie("asd","234",{});
   // setCookie("zxc","345",{
   //     expires:5
   // });

   
    function setCookie(key,val,ops){
        ops = ops || {};
        let e = "";
        if(ops.expires){
            var d = new Date();
            d.setDate( d.getDate() + ops.expires );
            e = ";expires="+d;
        }
        let p = ops.path ? ";path="+ops.path : "";
        document.cookie = `${key}=${val}${p}${e}`;
    }

可以发现我们之前写的cookie还在，而且刷新不影响。

 function getCookie(key){
        // 1.获取所有cookie
        let strC = document.cookie;
        // 2.使用"; "分割所有cookie，单独拿到每一条
        let arrC = strC.split("; ");
        // 3.遍历每一条cookie
        for(var i=0;i<arrC.length;i++){
            // 4.再次使用"="分割，分割成名字和值独立的状态
            // 5.判断数组的第一位的名字是否与传进来要获取的cookie的名字一致
            if(arrC[i].split("=")[0] === key){
                // 6.如果一致，返回数组的第二位，也就是对应的值
                return arrC[i].split("=")[1];
            }
        }
        // 7.循环结束后，如果程序还在执行，说明没有找到一致的值，那就返回空字符
        return "";
    }

 删除cookie
    removeCookie("abc",{
        path:"/"
    });

function removeCookie(key,ops){
        // 1.保证ops是个对象
        ops = ops || {};
        // 2.ops是对象了，无论如何得有个expires的属性为-1
        ops.expires = -1;
        // 3.将处理好的ops，给setCookie
        setCookie(key,"suibianxie,danshibunengshenglue",ops);
    }