首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议156:灵活使用Cookie存储长信息

关灯直达底部

Cookie适合在客户端存储用户的简单个人信息,因为Cookie既不是通用的通信机制,也不是通用的数据传输机制。从客观角度分析,Web浏览器存储的Cookie总数不能够超过300个。如果在同一个域中存储Cookie信息,那么Cookie个数不能够超过20,并且每个Cookie字符串长度不能够超过4KB,即每个Cookie文本文件的大小不能够超过4KB,因此使用Cookie存储信息时一定要适度。Cookie用来存储需要长期保存的大量数据,一般用来保存用户的状态信息和访问足迹等小数据。

由于每个Web服务器最多只能够存储20个Cookie,为了避免超出这个限制,可以把多个用户信息保存到一个Cookie中,而不是为每个用户信息新建一个Cookie。由于Cookie可存储的字符串最大长度为4KB(即4096个字符),在实际应用中,这个字符串长度完全能够满足各种用户信息的存储。

这里介绍一种方法,即在Cookie值中存储一组子名-值对。子名-值对的形式可以自由约定,确保不引发歧义即可。例如,使用冒号作为子名和子值之间的分隔符,而使用逗号作为子名-值对之间的分隔符,这种写法类似于对象直接量:


subName1:subValue1,subName2:subValue2,subName3:subValue3


然后把这组子名-值串作为值传递给Cookie的名称,例如:


name=subName1:subValue1,subName2:subValue2,subName3:subValue3


为了确保子名-值串不引发歧义,建议使用escape方法对其进行编码,读取时再使用unescape方法转码即可。下面的示例演示了如何在Cookie中存储更多的信息:


//定义有效期

var d=new Date;

d.setMonth(d.getMonth+1);

d=d.toGMTString;

//定义Cookie字符串

var a="name:a,age:20,addr:beijing"

var c="user="+escape(a)

c+=";"+"expires="+d;

document.Cookie=c;//写入Cookie信息


当读取Cookie信息时,首先要获取Cookie值,然后调用unescape方法对Cookie值进行解码,最后再访问Cookie值中每个子Cookie值。因此,对于document.Cookie来说,需要分解3次才能得到精确的信息。要获取Cookie的函数如下:


//读取所有Cookie信息,包括子Cookie信息

//参数:无

//返回值:对象,存储的是子Cookie信息,其中名称作为对象的属性而存在,而值作为属性值存在

function getSubCookie{

var a=document.Cookie.split(";");

var o={};

for(var i=0;i<a.length;i++){//遍历Cookie信息数组

a[i]&&(a[i]=a[i].replace(/^/s+|/s+$/,""));

//清除头部空格符

var b=a[i].split("=");

var c=b[1];

c&&(c=c.replace(/^/s+|/s+$/,""));//清除头部空格符

c=unescape(c);//解码Cookie值

if(!//,/gi.test(c)){

o[b[0]]=b[1];

}

else{

var d=c.split(",");

for(var j=0;j<d.length;j++){//遍历子Cookie数组

var e=d[j].split(":");

o[e[0]]=e[1];//把子Cookie信息写入返回对象

}

}

}

return o;//返回包含Cookie信息的对象

}


目前的浏览器都支持Cookie,不过也有例外。例如,个别老式浏览器不支持Cookie,或者用户禁止浏览器使用Cookie。为了安全起见,在使用Cookie之前,应该探测客户端是否启用Cookie,如果没有启用,则可以采取应急措施,避免不必要的损失或导致网站部分功能无法实现。

一般可以使用下面的方法来探测客户端浏览器是否支持Cookie。


if(navigator.CookieEnabled){/*如果存在CookieEnabled属性,则说明浏览器支持Cookie,可以安全写入或读取Cookie信息*/

setCookie;

//或

getCookie;

}


如果浏览器启用了Cookie,则CookieEnabled属性值为true;如果浏览器禁用了Cookie,则该属性值为false。