cookie （浏览器缓存）

cookie 其实是个后端技术

指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常是经过加密的）

服务器本身是没有记录客户端身份的方法的。

以前是字字千金，一个域下只能设置几十个，而现在据说有5M（5兆）

 

对于前端来说，种cookie就是给document设置了一个叫做cookie的自定义属性，这个属性能被所有浏览器识别，并缓存在浏览器中。

写（设置）cookie 一定要在服务器环境下运行。

设置 cookie ：

　　document.cookie = key = val

　　设置 cookie 都会调用 toString 

读取：

　　document.cookie

　　返回的结果是把这个域中所有的cookie都显示出来了。每个key=val 都是以 （分号加空格）分割的

cookie 的默认生命周期是当浏览器关闭以后就结束。不过可以通过 expires 去设置生命周期

　　比如：  document.cookie = ' name=xyf2 ' + ' expires= ' + 未来的时间点

 

哪里会用到cookie ?? ：

　　猜你喜欢、身份验证、每日推荐、免登陆。。。

 

cookie的好处：

　　1.生命周期是可以设置的。而 localStorage 的内容只要不清一直都在。

　　2.可以把常用的重要的数据缓存起来，减少 http 请求

 

cookie 的设置、获取、移除

    function getCookie(key){//获取cookie的时候，会把所有的cookie都获取出来，并且以分号加空格（; ）来划分每一个cookie
        let c = document.cookie.split('; ');//获取到一堆cookie后用分号加空格切一刀
        let on = false;
        for(let i of c){
            let arr = i.split('=');//每条数据都有‘name’=‘val’，所以在用（=）切一刀
            if(arr[0] === key){
                on = true;
                return arr[1];
            }
        }
        if(!on)return null;
    }

    function setCookie(key,val,obj={}){
        let d = new Date();
        let {name,time} = obj;//解构赋值
        switch(name){
            case 'date' :
                d.setDate(d.getDate() + time);//这行的console 结果是时间戳
            break;
            case 'minu' :
                d.setMinutes(d.getMinutes() + time);
            break;
            case 'hour' :
                d.setHours(d.getHours() + time);
            break;
        }
        document.cookie = key +'='+ JSON.stringify(val) + (obj.time?'; expires='+ d.toUTCString:'');//拼接cookie
//d.toUTCString 时间到了刷新页面就清除cookie，只用 d 需要关闭页面再打开才会清除过期的cookie 
    }
    // setCookie('age',12);
    // setCookie('age',12,{name:'hour',time:5});
    // console.log(getCookie('name'));

    function rmCookie(key,val){//删除cookie，也可以直接在控制台中删，也可以给cookie设置时间，时间到了就会移除
        setCookie(key,val,{name:'date',time:-1}); //根据key来得到需要删除的cookie，将该cookie设置截止时间为负数即可
    }

    let arr = {a:1};
    setCookie('name',arr,{name:'date',time:1});

    console.log( getCookie('name'));

 

 

 

2018-12-14