-
十月 18
cookie大家应该不陌生了,关于cookie的概念这里就不介绍了,今天给大家说说cookie使用过程中的一些小技巧
首先,cookie有几个特点,这个是要先明白的:
1 相同域名下的所有页面是共享同一个cookie的
2 cookie有大小和数量限制,一般认为一个域名下的cookie不能超过50个,总大小不能超过4k
3 cookie是有有效期的,过期后cookie不再生效
上面的三点是cookie比较重要的几个特点,1很好理解,比如你登录了一个论坛,如果不是所有页面共享一个cookie,那么只要你切换页面,就要登录一次,这个很麻烦。2可能在实际中感觉不到,因为用户浏览网页是不会有cookie满了的这种感觉的,实际中,如果一个网站要保存很多信息在客户端上,cookie不够怎么办?现在高级浏览器支持localstorage本地存储,或者前几年还流行flash的cookie,页面会加载一个宽高都是1像素的空白flash做数据存储,因为flash的cookie会大的很多,但是这种需要页面js和flash做交互,稍显不便。目前流行的还是cookie+localstorage做法,cookie存储基本的信息,localstorage存储一些更大的信息。3这个也很好理解,你今天登陆一个论坛,过两天再来的话就会让你再次登陆,这就是cookie保存的登录信息过期了。
需要注意一点,cookie是保存在客户端的,而且是以文件的形式保存,这个文件可以随意修改,如果信息不加密直接保存,会有很大的安全隐患,所以,如果是敏感信息,一定要加密保存。
下面我们用原生js说说cookie的一些使用技巧。
首先是cookie的读取,这个很简单,一个document.cookie,返回的就是cookie的字符串,里面会有分号去隔开。你可以在js里用alert(document.cookie); 来看下cookie都有什么。
但是,这个cookie是把所有的都放在一起,如果我们要读取其中一个怎么办?很遗憾,没有现成的方法,那么只有我们去解析cookie字符串了:
function readCookie(cname){ var cookieStr = document.cookie;//先拿到cookie var cookieArr = cookieStr.split('; ');//用分号来分割cookie,注意分号后面有个空格,split分割后会用数组保存 for(i=0; i<cookieArr.length;i++){//循环数组 var subCookie = cookieArr[i].split('=');//这里数组存的就是 名字=数值 这种格式,所以再次以=来分割 if(subCookie[0] == cname){//数组0存的就是名字,我们和上面的cname来对比一下 return subCookie[1];//如果这个名字和我们要找的名字一样,就返回对应的数值 } } return '';//当然也有可能名字不存在,那么返回一个空值吧 }
这个函数很好理解,首先,cookie是有规律的,就是以分号来隔开,然后以名字=值的形式存储,所以,我们只要遍历这个字符串,循环匹配即可。
有了读取cookie,那么相应的也有写入cookie。
首先,写cookie是很特殊的,怎么写呢?很简单,一句 document.cookie = "名字=数值"; 就可以了。那么我再问问,如果写多个咋办呢?比如我想写2个cookie,一个是用户名,一个是密码,因为上面我们知道,cookie是分号隔开的,那么是不是document.cookie = "user=123;pass=1234"; 就可以了?答案当然不是的,我们可以执行一下看看,这么写,只能保存user,后面的pass就没有了,所以这么写是错误的。
那究竟该怎么写?其实也很简单,一句接一句写:
document.cookie = "user=123";
document.cookie = "pass=123";
所以,cookie的特殊就在这里了,这里的=不是表示赋值的意思,而是类似于append方法,追加,这么写就可以写入多个cookie了。
之前,我们说cookie是有有效期的,那么如何指定cookie的有效期呢?这就需要一个关键字:expires。比如,我们想让user这个cookie只有今天有效,过了今晚12点就无效,可以这么写:
document.cookie = "user=123; expires="+new Date();
因为有了expires关键字,就可以设定cookie的有效期了。当然,有人可能会问,如果我不指定有效期,那么cookie的有效期是多久?答案很简单,你浏览器关闭了,cookie就失效了。换句话说,就是有效期和当前浏览器的开始保持一致,浏览器一旦关闭,cookie就失效。
现在,我们已经会读取cookie,也会写cookie了,那么,我想删除一个cookie怎么办?
很不幸的是,没有现成的方法去删除一个cookie,难道只能等他过期吗?等等,过期?我们好像知道了什么。对了,就是利用过期来删除一个cookie。我们知道,cookie是有有效期的,如果我把cookie设置一个过去的时间,那不就是相当于删除了吗?
好的,我们来封装一个方法:
function writeCookie(cname,cvalue,cday){//三个参数,名字,数值和过期时间 var cookieDate = new Date(); cookieDate.setDate(cookieDate.getDate() + cday);//setDate是设置一个日期,我们先获得当前日期,然后加上过期的天数 document.cookie = cname+'='+cvalue+';expires='+cookieDate; }
通过这样一个函数,我们就可以写一个cookie,并指定过期时间了,比如,想让30天后过期,writeCookie('user','123',30); 即可,想让几天后过期,把cday设置为几就可以了。
同理,如果我们想要删除一个cookie,只要把cday设置为-1就可以了。-1表示昨天,所以是一个已经过期的时间,那么cookie自然就删除了。


◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
1楼 Lee
2楼 JHJKH