JavaScript本地储存（1）：cookie在前端

2013-03-27 12:13 Barret李靖阅读(4766) 评论(0) 编辑收藏举报

　　以前心里总是默念着这句：“知道资源在哪儿就是成功的一半”。对于很多知识的学习，好像也一直停留在知道它在哪儿的地步，看来现在需要有所改变了！

　　那就从cookie开始吧~

　　Cookie（复数形态Cookies），中文名称为小型文本文件或小甜饼，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端（Client Side）上的数据（通常经过加密）。定义于RFC2109（已废弃），最新取代的规范是RFC2965。

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");