实例:使用面向对象思想处理cookie
如果读者对cookie 不熟悉,可以在第七章学习它的使用方法,虽然在那里创建了几个
通用函数用于cookie 的处理,但这些函数彼此分离,没有体现出是一个整体。联想到
JavaScript中Math对象的功能,它其实就是通过Math这个全局对象,把所有的数学计算相
关的常量和方法都联系到一起,作为一个整体使用,提高了封装性和使用效率。现在对cookie
的处理事实上也可以按照这种方法来进行。
6.9.1 需求分析
对于cookie 的处理,事实上只是封装一些方法,每个对象不会有状态,所以不需要创
建一个cookie 处理类,而只用一个全局对象来联系这些cookie 操作。对象名可以理解为命
名空间。下面考虑cookie操作有哪些经常的操作:
(1)设置cookie包括了添加和修改功能,事实上如果原有cookie名称已经存在,那么
添加此cookie 就相当于修改了此cookie。在设置cookie 的时候可能还会有一些可选项,用
于指定cookie 的声明周期、访问路径以及访问域。为了让cookie 中能够存储中文,该方法
中还需要对存储的值进行编码。
(2)删除一个cookie,删除cookie只需将一个cookie的过期事件设置为过去的一个时
间即可,它接收一个cookie的名称为参数,从而删除此cookie。
(3)取一个cookie的值,该方法接收cookie名称为参数,返回该cookie的值。因为在
存储该值的时候已经进行了编码,所以取值时应该能自动解码,然后返回。
针对这些需求,下一小节将实现这些功能。
6.9.2 创建Cookie对象
因为是作为类名或者命名空间的作用,所以和Math对象类似,这里使用Cookie来表示
该对象:
var Cookie=new Object();
6.9.3 实现设置Cookie的方法
方法原型为:setCookie(name,value,option);其中name 是要设置cookie的名称;value是
设置cookie的值;option包括了其他选项,是一个对象作为参数。其实现如下:
Cookie.setCookie=function(name,value,option){
//用于存储赋值给document.cookie的cookie格式字符串
var str=name+"="+escape(value);
if(option){
//如果设置了过期时间
if(option.expireDays){
var date=new Date();
var ms=option.expireDays*24*3600*1000;
date.setTime(date.getTime()+ms);
str+="; expires="+date.toGMTString();
}
if(option.path)str+="; path="+path; //设置访问路径
if(option.domain)str+="; domain"+domain; //设置访问主机
if(option.secure)str+="; true"; //设置安全性
}
document.cookie=str;
}
6.9.4 实现取Cookie 值的方法
方法原型为:getCookie(name);其中name 是指定cookie的名称,从而根据名称返回相应
的值。实现如下:
Cookie.getCookie=function(name){
var cookieArray=document.cookie.split("; "); //得到分割的cookie名值对
var cookie=new Object();
for(var i=0;i<cookieArray.length;i++){
var arr=cookieArray[i].split("="); //将名和值分开
if(arr[0]==name)return unescape(arr[1]); //如果是指定的cookie,则返回它的值
}
return "";
}
6.9.5 实现删除Cookie的方法
方法原型为:deleteCookie(name);其中name 是指定cookie 的名称,从而根据这个名称
删除相应的cookie。在本实现中,删除cookie是通过调用setCookie来完成的,将option的
expireDays属性指定为负数即可:
Cookie.deleteCookie=function(name){
this.setCookie(name,"",{expireDays:-1}); //将过期时间设置为过去来删除一个cookie
}
通过上面的代码,整个Cookie对象就创建完毕,也可以将其放到一个大括号中来定义,
例如:
var Cookie={
setCookie:function(){},
getCookie:function(){},
deleteCookie:function(){}
}
通过这种形式,可以让Cookie 的功能更加清晰,它作为一个全局对象,大大方便了对
Cookie的操作,例如:
Cookie.setCookie(“user”,”jack”);
alert(Cookie.getCookie(“user”));
Cookie.deleteCookie(“user”);
alert(Cookie.getCookie(“user”));
上面的代码就先建立了一个名为user 的cookie,然后删除了该cookie。两次alert 输出
语句显示了执行的效果。
本节通过建立一个Cookie 对象来处理cookie,方便了操作,也体现了面向对象的编程
思想:把相关的功能封装在一个对象中。考虑到JavaScript语言的特点,本章没有选择需要
创建类的面向对象编程的例子,那和一般面向对象语言没有大的不同。而是以JavaScript中
可以直接创建对象为特点介绍了Cookie对象的实现及其工作原理。事实上这也和JavaScript
内部对象Math的工作原理是类似的。
var Cookie=new Object(); Cookie={ setCookie:function(name,value,option){ //用于存储赋值给document.cookie的cookie格式字符串 var str=name+"="+escape(value); if(option){ //如果设置了过期时间 if(option.expireDays){ var date=new Date(); var ms=option.expireDays*24*3600*1000; date.setTime(date.getTime()+ms); str+="; expires="+date.toGMTString(); } if(option.path)str+="; path="+path; //设置访问路径 if(option.domain)str+="; domain"+domain; //设置访问主机 if(option.secure)str+="; true"; //设置安全性 } document.cookie=str; }, getCookie:function(name){ var cookieArray=document.cookie.split("; "); //得到分割的cookie名值对 var cookie=new Object(); for(var i=0;i<cookieArray.length;i++){ var arr=cookieArray[i].split("="); //将名和值分开 if(arr[0]==name){ //如果是指定的cookie,则返回它的值 return unescape(arr[1]); } } return ""; }, deleteCookie:function(name){ this.setCookie(name,"",{expireDays:-1}); //将过期时间设置为过去来删除一个cookie } }