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

  • 设置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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容

  • 什么是 Cookie “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就...
    恩德_b0c2阅读 387评论 0 3
  • 作者:晚晴幽草轩www.jeffjade.com/2016/10/31/115-summary-of-cookie...
    饥人谷_Dylan阅读 1,217评论 0 51
  • 什么是 Cookie “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就...
    小旭同志阅读 458评论 1 1
  • 背景在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cooki...
    时芥蓝阅读 2,350评论 1 17
  • 记录下宝贝的校园生活!
    幸福人生_8e9a阅读 251评论 0 1