cookie的基本操作

**

一.什么是cookie？

**
1.cookie 是一个以字符串的形式存储数据的位置
2.每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
3.每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
**

二.cookie的特点

**
1.存储大小有限制，一般是 4 KB 左右
2.数量有限制，一般是 50 条左右
3.有时效性，也就是有过期时间，一般是 会话级别（也就是浏览器关闭就过期了）
4.有域名限制，也就是说谁设置的谁才能读取
**

三.cookie的存储形式

**
cookie 是以字符串的形式存储，在字符串中以 key=value 的形式出现
**

四.cookie的基本操作

**
增改：

function setCookie( name , value , options ){
            // 操作字符串;
            var cookie_string = name + "=" + value;
            // 让options不传参数的时候也是一个对象;
            if(!(typeof options === "object" && options !== null && options.constructor && options.constructor === Object)){
                options = {};
            }
            // domain 传入进来没有
            if( typeof options.domain === "string"){
                cookie_string += ";domain=" + options.domain;
            }
            // path 传进来没有
            if( typeof options.path === "string"){
                cookie_string += ";path=" + options.path;
            }
             // expires 传进来没有
            if( typeof options.expires === "number"){
                // expires 参数单位为天;
                var d = new Date();
                d.setDate( d.getDate() + options.expires );
                cookie_string += ";expires=" + d;
            }
            document.cookie = cookie_string;
        }

查：

function getCookie( name ){
            // 运算;
            var cookie_string = document.cookie;
            // 请务必注意，拆分的时候是 分号 + 空格 ;
            // 请务必注意，拆分的时候是 分号 + 空格 ;
            // 请务必注意，拆分的时候是 分号 + 空格 ;
            // ; 
            var cookie_array  = cookie_string.split("; ");
            // console.log(cookie_array);
            for(var i = 0 ; i < cookie_array.length ; i ++){
                // 拆分 : 1. cookie 的 key值;
                //      : 2. cookie 的value值;
                // console.log(cookie_array[i].split("="));
                if( cookie_array[i].split("=")[0] === name ){
                    return cookie_array[i].split("=")[1]
                }
            }
            return "";
        }

删：

function removeCookie( name , options ){
            // options => object;
            // options => "string"
            setCookie( name ,"" ,  isObject( options ) ? assign( options , { expires : -1 }) : { path : options, expires : -1  })
        }

封装以上cookie操作的函数：

// 判断options的数据对象
function isObject( data ){
    //typeof data === "string"  判断data是否是数据
    //data !== null  data不能为空(null)   因为  typeof null === "string"-----true
    //data.constructor && data.constructor === object  用于区分data的类形是数组还是对象
    return (typeof data === "string" && data !== null && data.constructor && data.constructor === object);
}
//对象合并
function assign(){
    //拿出目标对象
    var target = arguments[0];
    //合并其他对象
    //遍历arguments[]
    for( var i = 1 ; i < arguments.length ; i ++){
        //将其他对象放入数组arguments[]中
        for( var attr in arguments[i]){
            //将每一个对象放入target中
            target[attr] = arguments[i][attr];
        }
    }
    //返回target
    return target;
}
// var res = assign({a:1},{b:2},{c:3});
// console.log(res);


//删除cookie
//只要把过期时间设置为前一天，浏览器自动删除
function removeCookie( name , options ){
    // options => object;
    // options => "string"
    //设置name，  value为“”(空) 
    //如果options => object   的话---->assign( options , { expires : -1 })
    //如果options => "string" 的话---->{ path : options , expires : -1 }
    cookie( name , "" , isObject( options ) ? assign( options , { expires : -1 }) : { path : options , expires : -1 })
}

// 合并getCookie和setCookie
function cookie( name , value , options ){
    //此时参数大于一个，value 是一个字符串。 那么我们认为此时我们在设置cookie;
    if( arguments.length > 1 && typeof value === "string"){
        //判断options-----isObject()
        if(!isObject( options )){
            //如果不是对象，那么给options赋值为空对象
            options = {};
        }
        //判断options.expires是否是数字
        if( typeof options.expires === "number" ){
            var d = new Date();
            d.setDate( d.getDate() + options.expires );
        }
        //document设置cookie的方法
        return (document.cookie = [
            //name===value
            name + "=" + value,
            //判断  options.domain  的类型是否是 string ，是的话";domain=" + options.domain；不是的话 返回空字符串
            typeof options.domain === "string" ? ";domain=" + options.domain : "",
            //判断  options.path  的类型是否是 string ，是的话";path=" + options.path；不是的话 返回空字符串
            typeof options.path === "string" ? ";path=" + options.path : "",
            //判断  options.expires  的类型是否是 string ，是的话";expires=" + d；不是的话 返回空字符串
            typeof options.expires === "number" ? ";expires=" + d : "",
            // 数组转换成字符串 : join();
        ].join(""));
    }


    //如果参数为1个
    //设置cookie_string对象
    var cookie_string = document.cookie;
    //设置cookie_array为数组----   .split("; ")  ---对象转数组/数组转对象
    var cookie_array = cookie_string.split("; ");
    //遍历cookie_array数组
    for( var i = 0 ; i < cookie_array.length ; i ++){
        //查询数据下标
        if( cookie_array[i].split("=")[0] === name ){
            return cookie_array[i].split("=")[1];
        }
    }
    return "";
}