美文网首页
cookie是什么?cookie的设置/修改/获取/删除

cookie是什么?cookie的设置/修改/获取/删除

作者: jasonhsu9 | 来源:发表于2018-12-02 12:15 被阅读0次
    • 设置cookie时,一定加上expires字段,以便控制失效期,否则你都不知道自己写的cookie什么时候失效!
    • cookie的作用域(主域名的cookie会暴露给子域名,就像子函数可访问父函数变量一样)
    • 一次只能写一条cookie,比如document.cookie = "Brother=Jordan; wife=LiBingbing"后面的wife=LiBingbing将会被忽略。
    • cookie结果以字符串的形式保存,多个键值对之间用分号+空格隔开。

    COOKIE长度限制总结

    cookie是什么?

    cookie在柯林斯词典上的释义:甜饼,网络跟踪器(记录上网用户信息的技术) 。
    之前一直把cookie和cache傻傻分不清,现在可以确定cookie表示网络跟踪器,cache请听下回分解。

    cookie在浏览器中能做什么?

    cookie能在客户端保存用户信息(区别于session在服务端保存用户信息)

    cookie长啥样?
    document.cookie;
    "PSTM=1525222154; BIDUPSID=1BA8DC29551F96ACF77D611650D6AAA2; bdshare_firstime=1535499504816; BAIDUID=01464E7365C9058260B1952D289D48F2:FD=1; MCITY=-%3A; BDORZ=B467B5EBF6F3CD402E515D22BCDA1598; PS_REFER=1; H_PS_PSSID=1447_27213_21080_27244_22160; delPer=0; PSINO=7; ZD_ENTRY=empty; Hm_lvt_46c8852ae89f7d9529f0082fa0a15edd=1522965215,1543496920,1523497751,1543215248; Hm_lpvt_4622852ae89f7d9526f0082fafa15edd=1542215948"
    
    document.cookie.length;
    415
    
    typeof document.cookie
    "string"
    

    通过document.cookie.length可以发现cookie其实就是一个由key和value加分号组成的字符串,这个例子中的字符串长度为415。
    typeof document.cookie返回true也证明了这点。


    cookie的----设置/修改/获取/删除,四种方法总结。
    一、cookie设置

    预备知识:undefined和null在cookie中的妙用

    /*
     * setCookie 设置cookie
     *  name cookie的名称
     *  value cookie的值
     *  day cookie的过期时间
     */
            var setCookie = function (cookie_name, value, day) {
    
                if (day != null) {
                    //expires为失效日期,以毫秒计算
                    console.log("此cookie走的是if流程", cookie_name)
                    var expires = day * 24 * 60 * 60 * 1000;
                    var date = new Date(+new Date() + expires);
                    //+new Date()是取得当前时间毫秒值的简略写法,等价于new Date().getTime();
                    document.cookie = cookie_name + "=" + escape(value) +
                        ((day == null) ? "" : ";expires=" + date.toGMTString());
    
                } else {
                    console.log("此cookie走的是else流程", cookie_name)
                    var date = new Date(+new Date());
                    document.cookie = cookie_name + "=" + escape(value) + ";expires=" + date.toGMTString();
                }
            };
    
            //写入有效期为365天的cookie
            //成功
            setCookie("firstName", "James", 365);
    
            //写入有效期为0天的cookie
            //立即失效 ======在控制台看不到,当然后续也使用不到
            setCookie("lastName", "LeBron", 0);
    
            //写入有效期为负数的cookie
            //立即失效======在控制台看不到,当然后续也使用不到
            setCookie("Career", "Player", -1);
    
            //没有日期参数,会走else流程
            setCookie("parameter", "noParameter");
    
            //向cookie直接写入:有效期为当前时刻的testCurrent字段
            //不能在chrome看到cookie,因为立即失效。
            document.cookie = 'testCurrent=Invalid;expires=' + new Date().toUTCString();
    
            //向cookie直接写入:有效期为10秒,的testCurrent字段
            //在chrome调试工具中,看到10秒后cookie中testCurrent字段消失,
            document.cookie = 'testCurrent=Invalid;expires=' + new Date(+new Date() + 10000).toUTCString();
    

    setCookie中:escape()函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。它将任何形式的value,转换成字符串,此函数存在于window对象下。

    escape('{name:"Xu",job:"fed"}')
    "%7Bname%3A%22Xu%22%2Cjob%3A%22fed%22%7D"
    

    Cookie默认有效期是多久?
    是指不专门设置有效期时的有效期,不设置有效期时Cookie只在当前会话内有效,关闭浏览器后即被丢弃。

    setCookie函数中有效期的实现依据是什么?

    在向document.cookie写入值的时候,末尾添加字符串为;expires=GMT/UTC_Format_Time,expires使用GMT或UTC格式的时间,即可设置有效期,有效期格式必须为GMT或者UTC格式。

    cookie常用字段设置语法:

    document.cookie = "cookieName=mader; expires=Fri, 31 Dec 2017 15:59:59 GMT; path=/mydir; domain=cnblogs.com; max-age=3600; secure=true";
    
    cookie常用字段 字段描述
    cookieName=mader name=value,cookie的名称和值
    expires=Fri, 31 Dec 2017 15:59:59 GMT expires,cookie过期的日期,如果没有定义,cookie会在对话结束时过期。日期格式为 new Date().toUTCString()
    path=/mydir path=path (例如 '/', '/mydir') 如果没有定义,默认为当前文档位置的路径。
    domain=cnblogs.com 指定域(例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。
    max-age=3600 文档被查看后cookie过期时间,单位为秒
    secure=true cookie只会被https传输 ,即加密的https链接传输
    二、修改cookie

    1 直接修改firstName字段

    document.cookie = "firstName=Jordan;expires=" + new Date(+new Date() + 365*24*3600*1000).toUTCString();
    

    2 使用setCookie(cookie_name,value,day)函数,也可以修改,使用相同的字段名,后面的可以覆盖前面的值。

    setCookie("firstName","Jordan",365);
    
    三、获取cookie
    /*
     * 获取对应名称的cookie
     * name cookie的名称
     * {null} 不存在时,返回null
     */
    
    var getCookie = function (name) {
        var arr;
        var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    };
    

    下面是一个实际的例子

    console.log(document.cookie);//看看当前cookie值
    //"firstName=James; Brother1=Jordan; Brother2=Kobe"
    document.cookie.match(new RegExp("(^| )firstName=([^;]*)(;|$)"));
    //下面一行是匹配结果,没有加注释效果,为了看起来更醒目。
    ["firstName=James", "", "James", "", index: 0, input: "firstName=James", groups: undefined]
    

    cookie获取正则解析:
    "(^| )" + name + "=([^;]*)(;|$)"是正则匹配。 (^| )匹配cookie开头或空格(cookie键值对之间用分号空格隔开),也就是cookie键值对的开始。接着是cookie的名称name,([^;]*)匹配除分号以外的任意字符,也就是cookie键值对的值。最后(;|$)匹配分号或整个cookie的结尾,也就是cooke键值对的结尾。

    四、删除cookie
     /**
      * 删除cookie
      * name cookie的名称
      */
     var delCookie = function (name) {
         setCookie(name, '', -1);
     };
    
    //删除上面的firstName字段用:
    delCookie("firstName");
    

    设置要删除的cookie的expires为过去的时间即可。


    cookie的主要作用:

    Cookie主要用在以下三个方面:

    会话状态管理(如用户登录状态、购物车、游戏分数和其它需要记录的信息)
    个性化设置(如用户自定义设置、主题等)
    浏览器行为跟踪(如跟踪分析用户行为)
    保持登录状态(拒绝cookie可能无法正常登录,不过也有其它解决方案)

    加深理解cookie:
    js与cookie的domain和path之间的关系
    javascript操作cookie
    w3school中JavaScript Cookies

    相关文章

      网友评论

          本文标题:cookie是什么?cookie的设置/修改/获取/删除

          本文链接:https://www.haomeiwen.com/subject/rzxjcqtx.html