Cookie
Cookie(复数形态Cookies),中文名称为小型文本文件或小甜饼,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端(Client Side)上的数据(通常经过加密)
Clasification [分类]
说到底,cookie就是保存在客户端的一段字符串(注意:不是数组)。
cookie可以手动设置,也可以由服务器产生,当客户端(浏览器)向服务器发送请求,服务器会反馈一些信息给客户端,这些信息的key/value值被浏览器作为文件保存在客户端特定的文件夹中。
1.内存Cookie
内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的。
2.磁盘Cookie
硬盘Cookie保存在硬盘里,有一个过期时间,除非用户手工清理或到了过期时间,硬盘Cookie不会被删除,其存在时间是长期的。
Arguments [参数]
属 性 名 | 描 述 |
String name | 该Cookie的名称。Cookie一旦创建,名称便不可更改 |
Object value | 该Cookie的值。如果值为Unicode字符,需要为字符编码。如果值为二进制数据,则需要使用BASE64编码 |
int maxAge | 该Cookie失效的时间,单位秒。如果为正数,则该Cookie在maxAge秒之后失效。如果为负数,该Cookie为临时Cookie,关闭浏览器即失效,浏览器也不会以任何形式保存该Cookie。如果为0,表示删除该Cookie。默认为–1 |
boolean secure | 该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS,SSL等,在网络上传输数据之前先将数据加密。默认为false |
String path | 该Cookie的使用路径。如果设置为“/sessionWeb/”,则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”,则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/” |
String domain | 可以访问该Cookie的域名。如果设置为“.google.com”,则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.” |
String comment | 该Cookie的用处说明。浏览器显示Cookie信息的时候显示该说明 |
int version | 该Cookie使用的版本号。0表示遵循Netscape的Cookie规范,1表示遵循W3C的RFC 2109规范 |
Detail [参数详解]
1 key/value
1 document.cookie = 'username=木子Vs立青'
很简单吧,cookie是document的一个属性,在控制台,console.log(document.cookie)可以看到该域名下的cookie值。设置方式就是key=value.
如何已经存在了username这个key,再次如上操作就是修改value值了。
2.maxAge
1 var date = new Date();
2
3 date.setDate(date.getDate()+30);
4 date.toGMTString();
5
6 document.cookie = "name=value;expires=date"
expires这个参数是用来设置cookie有效期的,如果将expires设置成一个过去的时间(相对本机系统时间),相应的cookie就被删除,当然也可以手动来删除cookie~
上面给出的例子是以天为单位计算的,如果要改成其他的计时方式,可以修改第三行date.setDate(date.getDate()+30),为30天。比如要改成按小时计算:date.setHours(date.getHours()+30),为30小时。
3.path
1 document.cookie = "name=value;expires=date;path=path"
这里的path如何理解?比如在http://www.cnblogs.com/hustskyking/下创建一个cookie(即path=/hustskyking/),那么在http://www.cnblogs.com/hustskyking/下所有子目录都是可以访问这个cookie的;再比如path=/,意思就是在http://www.cnblogs.com/下的任何子目录都是访问到这个cookie的。
4.domain
1 document.cookie = "name=value;path=path;expires=date;domain=domain"
这里要说的是同域访问,比如在a.example.com和b.example.com下共享c.example.com下的cookie文件,只需如此这般...
1 document.cookie = "name=value;path=path;expires=date;domain=example.com"
你应该懂了~
5.secure
我们知道在网络中建立连接传输数据有两种常见的方式,一个钟是http,另一种是https,后者是加密传输。大家从上面也可以看出,cookie很容易被窃取,通过下面这个方式可以为cookie加一把安全锁。
1 document.cookie = "username=木子Vs立青;secure"
加了secure(默认值为空),之后,cookie提交到服务器时使用的是https传输。当然这只是加了一层防护,不等于我爱罗的绝对防御~
Attention [注意事项]
1.value值保护
1 document.cookie = name + "="+ escape (value);
我们通常会用escape将value进行编码,取回的时候用unescape()函数就行了。
2.重要信息就不要放到cookie值中了~
Class [封装cookie方法的类]
1、创建Cookie对象
1 //因为是作为类名或者命名空间的使用,所以和Math对象类似,这里使用Cookie来表示该对象
2 var Cookie = new Object();
2、实现设置Cookie的方法
1 //name是要设置cookie的名称;value是设置cookie的值,option包括了其它选项,是一个对象作为参数
2 Cookie.setCookie = function(name, value, option) {
3 //用于存储赋值给document.cookie的cookie格式字符串
4 var str = name+"="+escape(value);
5 if(option) {
6 //如果设置了过期时间
7 if(option.expireDays) {
8 var date = new date();
9 var ms = option.expireDays*24*3600*1000;
10 date.setTime(date.getTime()+ms);
11 str += "; expires="+date.toGMTString();
12 }
13 if(option.path) str += "; path="+path;//设置访问路径
14 if(option.domain) str += "; domain="+domain;//设置访问主机
15 if(option.secure) str += "; true";//设置安全性
16 }
17 document.cookie = str;
18 }
3、实现取Cookie的方法
1 //name是指定cookie的名称,从而根据名称返回相应的值
2 Cookie.getCookie = function(name) {
3 var cookieArray = document.cookie.split("; ");//得到分割的cookie名值对
4 var cookie = new Object();
5 for(var i=0; i<cookieArray.length; i++) {
6 var arr = cookieArray[i].split("=");//将名和值分开
7 if(arr[0]==name) return unescape(arr[1]);//如果是指定的cookie,则返回它的值
8 }
9 return "";
10 }
4、实现删除Cookie的方法
1 //name是指定cookie的名称,从而根据这个名称删除相应的cookie。在实现中,删除cookie是通过调用setCookie来完成的,将option的expireDays属性指定为负数即可
2 Cookie.deleteCookie = function(name) {
3 this.setCookie(name, "", {expireDays:-1});//将过期时间设置为过去来删除一个cookie
4 }
5 //通过下面的代码,整个Cookie对象创建完毕后,可以将其放到一个大括号中来定义:
6 var Cookie = {
7 setCookie:function(){},
8 getCookie:function(){},
9 deleteCookie:function(){}
10 }
11
12 //通过这种形式,可以让Cookie的功能更加清晰,它作为一个全局对象,大大方便了对Cookie的操作
13 Cookie.setCookie("user", "terry");
14 Cookie.deleteCookie("user");
Cookie特点
Cookie内存大小受限
空 | IE 6.0 | IE 7.0 8.0 | Opera | Fire Fox | Safari | Chrome |
---|---|---|---|---|---|---|
Cookie个数 | 每个域名下20个 | 每个域名下50个 | 每个域名30个 | 每个域名50个 | 没有限制 | 每个域名53个 |
Cookie大小 | 4095字节 | 4095字节 | 4096字节 | 4097字节 | 4097字节 | 4097字节 |
Cookie具有生命周期
Cookie可以保持登录信息到用户下次与服务器的会话,换句话说,下次访问同一网站时,用户会发现不必输入用户名和密码就已经登录了(当然,不排除用户手工删除Cookie)。而还有一些Cookie在用户退出会话的时候就被删除了,这样可以有效保护个人隐私。
Cookie在生成时就会被指定一个Expire值,这就是Cookie的生存周期,在这个周期内Cookie有效,超出周期Cookie就会被清除。有些页面将Cookie的生存周期设
Cookie满足同源策略
虽然网站images.google.com与网站www.google.com同属于Google,但是域名不一样,二者同样不能互相操作彼此的Cookie。
问题来了 举个例子:
访问玩zhidao.baidu.com 再访问wenku.baidu.com还需要重新登陆百度账号吗?
解决办法: 设置document.domain = ‘baidu.com’;
让页面属于这个基础域名下(那么此页面和任何二级域名为baidu.com的)
封装自己Cookie的增删改查函数
function setCookie(key, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = key + '=' + value + ';expires=' + oDate;
}
function removeCookie(key) {
setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
function getCookie(key) {
var cookieArr = document.cookie.split('; ');
for(var i = 0; i < cookieArr.length; i++) {
var arr = cookieArr[i].split('=');
if(arr[0] === key) {
return arr[1];
}
}
return false;
}