Javascript操纵Cookie实现购物车程序

/***************************************************************************************************** 
Name　　　　购物车 
Version　　　　1.1 
Author　　　　Vanni(凡林) url:www.27sea.com QQ:303590170 
CreateDate　　2005-05-31 
Description 
　　此类是基于JavaScript和客户端Cookie，请保证客户端开启Cookie 
　　数据保持（默认24*30小时）可以通过 this.expire=? 小时来指定 
　　类中两自带的两个对象 typeObj 和 proObj 均有两个相同属性名： name 和 value  

类中数据存储形式如下----------------------------------- 
Array( 
new typeObj('汽车',array( 
　　　　new porObj('三菱',200), 
　　　　new proObj('本田',500) 
) 
　　), 
　　new typeObj('蛋',array( 
　　　　new proObj('鸡蛋',10), 
　　　　new proObj('鸭蛋',20) 
　　) 
} 

Cookie 存取形式为[使用escape()函数加密过]-------------- 
　　购物车名 = 汽车#三菱:200|本田:500,蛋#鸡蛋:10|鸭蛋:20 

注意：客户端存Cookie时，不会出现问题。如果要循环存储的话，可能会出现有些存入，而有些未存入 
　　　解决方法：见下例(获得URL里的sales的数量，并存入Cookie) 

文件：/depot/compareproduct.php 中的JS代码片段 
<script language="javascript"> 
var car=new Car('compare'); 
var typeName='list'; 
car.delType(typeName);　　　　//将先前对比的产品清除 

//得到URL里的参数，并分隔成数组 
var url=location.href; 
var start=url.lastIndexOf('?sales='); 
var end=url.indexOf('&'); 
if(end==-1)end=url.length; 
var urlparam=url.substring(url.lastIndexOf('?sales=')+7, end ).split(','); 

function setPageVal(){ 
　　if(car.getPro(typeName).length==urlparam.length)return;　　　　//关键部分，如果数组长度不相等说明，有些Cookie没有存入 
　　else{ 
　　　　car.addType(typeName);　　　　　　　　　　　　//增一个类别 
　　　　for(i=0;i<urlparam.length;i++){ 
　　　　　　car.addPro(typeName,urlparam[i],'');　　//增加对比产品，如果存在，返回假 
　　　　} 
　　　　setTimeout('setPageVal();',100);　　　　　　//再次调用自身，没有用递归，是因为递归速度太快，仍会有存不进的问题 
　　} 
} 

setPageVal();　　　　　　　　　　　　　　　　　　　　//初始化数据 

function delItem(itemname){ 
　　car.delPro(typeName,itemname); 
　　var carData=car.getPro(typeName); 
　　var url=''; 
　　var carlen=carData.length; 
　　if(carlen>1){ 
　　　　for(i=0;i<carData.length;i++){ 
　　　　　　if(i==0)　　url =carData[i].name; 
　　　　　　else　　　　url+=','+carData[i].name; 
　　　　} 
　　　　document.write("waiting...."); 
　　　　location.href='../depot/compareproduct.php?sales='+url; 
　　}else{ 
　　　　if(confirm('如果删除它，那么只剩一个对比项了，是否关闭此窗口？')){ 
　　　　　　car.delCar(); 
　　　　　　window.close(); 
　　　　} 
　　} 
} 
</script> 

*****************************************************************************************************/ 
/** 
Cookie类 
*/ 
function Cookie(){ 
　　/** 
　　@desc 设置Cookie 
　　@return void 
　　*/ 
　　this.setCookie=function(name, value, hours){ 
　　　　var expire = ""; 
　　　　if(hours != null){ 
　　　　　　expire = new Date((new Date()).getTime() + hours * 3600000); 
　　　　　　expire = "; expires=" + expire.toGMTString(); 
　　　　} 
　　　　document.cookie = escape(name) + "=" + escape(value) + expire; 
　　} 
　　 
　　/** 
　　@desc 读取Cookie 
　　@return String 
　　*/ 
　　this.getCookie=function(name){ 
　　　　var cookieValue = ""; 
　　　　var search = escape(name) + "="; 
　　　　if(document.cookie.length > 0){  
　　　　　　offset = document.cookie.indexOf(search); 
　　　　　　if (offset != -1){  
　　　　　　　　offset += search.length; 
　　　　　　　　end = document.cookie.indexOf(";", offset); 
　　　　　　　　if (end == -1) end = document.cookie.length; 
　　　　　　　　cookieValue = unescape(document.cookie.substring(offset, end)) 
　　　　　　} 
　　　　} 
　　　　return cookieValue;　　　　 
　　}　　 
} 

function Car(name){ 
　　 
　　if( !window.clientInformation.cookieEnabled ) { 
　　　　alert('你的浏览器不支持Cookie无法使用此 购物车 系统'); 
　　　　return false; 
　　} 
　　 
　　//##内部变量############################################################# 
　　 
　　this.carName = name; 
　　this.expire　　 = 24*30;　　　　//购物车的有效时间(30天) 
　　this.carDatas = new Array(); 
　　this.cookie　　 = new Cookie(); 
　　 
　　//##内部对象############################################################# 
　　 
　　this.typeObj=function(name,value){　　//自带的 类别 对象 
　　　　this.name =name; 
　　　　this.value="/value; 
　　} 
　　this.proObj=function(name,value){　　//自带的" 商品 对象 
　　　　this.name =name; 
　　　　this.value=value; 
　　} 
　　 
　　//##私有方法列表########################################################## 
　　// 
　　//　　getTypePoint(typeName);　　　　　　　　//得到购物车里类别数组里的下标 
　　//　　getProPoint(typeName,proName);　　　　//得到购物车里类别下的产品下标 
　　//　　saveCookie()　　　　　　　　　　　　//以特定的形式存储此购物车的Cookie 
　　// 
　　//######################################################################## 
　　 
　　/** 
　　@desc 得到购物车里类别数组里的下标，找到的话返回下标，否则返回 -1 
　　@return int 
　　*/ 
　　this.getTypePoint=function(typeName){ 
　　　　var isok=false; 
　　　　var i=0; 
　　　　for(;i<this.carDatas.length;i++){ 
　　　　　　if(this.carDatas[i].name==typeName){ 
　　　　　　　　isok=true;　　　　　　//找到位置 
　　　　　　　　break; 
　　　　　　} 
　　　　} 
　　　　if(isok)　　return i; 
　　　　else　　　　return -1; 
　　} 
　　 
　　/** 
　　@desc 得到购物车里类别下的产品下标，找到返回下标，否则返回 -1 
　　@return int 
　　*/ 
　　this.getProPoint=function(typeId,proName){ 
　　　　var isok=false; 
　　　　var j = 0; 
　　　　var tempProObj=this.carDatas[typeId].value; 
　　　　for(;j<tempProObj.length;j++){ 
　　　　　　if(tempProObj[j].name==proName){ 
　　　　　　　　isok=true; 
　　　　　　　　break;　　 
　　　　　　} 
　　　　} 
　　　　if(isok)　　return j; 
　　　　else　　　　return -1; 
　　} 
　　 
　　/** 
　　@desc 存储生成的Cookie字符串 
　　@return void 
　　*/ 
　　this.saveCookie=function(){ 
　　　　var outStr=''; 
　　　　for( i=0; i<this.carDatas.length; i++ ){ 
　　　　　　var typeName =this.carDatas[i].name; 
　　　　　　var typeValue=this.carDatas[i].value; 
　　　　　　var proOutStr=''; 
　　　　　　for( j=0; j<typeValue.length; j++ ){ 
　　　　　　　　if ( j==0 )　　proOutStr = typeValue[j].name + ':' + typeValue[j].value; 
　　　　　　　　else　　　　proOutStr += '|' + typeValue[j].name + ':' + typeValue[j].value; 
　　　　　　} 
　　　　　　if ( i==0 )　　outStr = typeName + '#' + proOutStr; 
　　　　　　else　　　　outStr += ',' + typeName + '#' + proOutStr; 
　　　　} 
　　　　this.cookie.setCookie(this.carName,outStr,this.expire);　　//存入 Cookie　　 
　　} 
　　　　 
　　//##构造语句############################################################ 
　　 
　　if(this.cookie.getCookie(name)==''){ 
　　　　this.cookie.setCookie(name,'',this.expire); 
　　}else{ 
　　　　var tempTypes=this.cookie.getCookie(name).split(','); 
　　　　for(i=0;i<tempTypes.length;i++){ 
　　　　　　var tempTypeObj=tempTypes[i].split('#'); 
　　　　　　var type_pro=new Array(); 
　　　　　　if(tempTypeObj[1]){ 
　　　　　　　　var tempProObj=tempTypeObj[1].split('|'); 
　　　　　　　　for(j=0;j<tempProObj.length;j++){ 
　　　　　　　　　　var proDesc=tempProObj[j].split(':'); 
　　　　　　　　　　type_pro.push(new this.proObj(proDesc[0],proDesc[1])); 
　　　　　　　　} 
　　　　　　} 
　　　　　　this.carDatas.push(new this.typeObj(tempTypeObj[0],type_pro)); 
　　　　} 
　　} 

　　//##公共方法列表######################################################### 
　　// 
　　//　　addType(typeName);　　　　　　　　　　//增加一个类别 
　　//　　addPro(typeName,proName,value);　　　　//增加一个产品 
　　//　　editPro(typeName,proName,value);　　//修改产品的值 
　　//　　delPro(typeName,proName);　　　　　　//删除购物车内的一个类别下的产品 
　　//　　delType(typeName);　　　　　　　　　　//删除购物车内的一个类别，包括类别下的产品 
　　//　　delCar();　　　　　　　　　　　　　　//删除购物车 
　　//　　 
　　//　　getCar();　　　　　　　　　　　　　　//得到整个购物车的数据 
　　//　　getType();　　　　　　　　　　　　　　//得到购物车内的所有类别列表 
　　//　　getPro(typeName);　　　　　　　　　　//得到购物车内指定类别下的产品列表 
　　//　　getProVal(typeName,proName);　　　　//得到购物车内指定类别下的产品属性 
　　// 
　　//######################################################################## 
　　 
　　/** 
　　@desc 在购物车里增加一个类别，增加成功返回真，否则返回假 
　　@return bool 
　　*/ 
　　this.addType=function(typeName){ 
　　　　if(this.getTypePoint(typeName)!=-1)　　　　return false;　　　　　　　　//如果已经有此类别了，返回假 
　　　　this.carDatas.push(new this.typeObj(typeName,new Array()));　　　　　　//push进 自身数组 
　　　　this.saveCookie();　　//存入 Cookie 
　　　　return true; 
　　} 
　　 
　　/** 
　　@desc 在购物车里增加一个产品，增加成功返回真，否则返回假 
　　@return bool 
　　*/ 
　　this.addPro=function(typeName,proName,value){ 
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint ==-1 ) return false;　　　　//没有此类别，无法增加，返回假 
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint != -1 ) return false;　　　　//有此产品了，无法增加重复，返回假 
　　　　this.carDatas[typePoint].value.push(new this.proObj(proName,value));　　//push到自身数组 
　　　　this.saveCookie();　　//存入 Cookie 
　　　　return true; 
　　} 
　　 
　　/** 
　　@desc 修改购物车里的产品属性 
　　@return bool 
　　*/ 
　　this.editPro=function(typeName,proName,value){ 
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint == -1 ) return false;　　//没有此类别，无法修改，返回假 
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint == -1 ) return false;　　//没有此产品，无法修改，返回假 
　　　　this.carDatas[typePoint].value[proPoint].value=value;　　　　　　　　　　　　　　//更新自身  
　　　　this.saveCookie();　　//存入 Cookie 
　　　　return true; 
　　} 
　　 
　　/** 
　　@desc 删除一个产品 
　　@return bool 
　　*/ 
　　this.delPro=function(typeName,proName){ 
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint == -1 ) return false;　　//没有此类别，无法删除，返回假 
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint == -1 ) return false;　　//没有此产品，无法删除，返回假 
　　　　var pros=this.carDatas[typePoint].value.length; 
　　　　this.carDatas[typePoint].value[proPoint] = this.carDatas[typePoint].value[pros-1];　　//最后一个产品放置要删除的产品上 
　　　　this.carDatas[typePoint].value.pop(); 
　　　　this.saveCookie();　　//存入 Cookie 
　　　　return true; 
　　} 
　　 
　　/** 
　　@desc 删除一个类别 
　　@return bool 
　　*/ 
　　this.delType=function(typeName){ 
　　　　var typePoint=this.getTypePoint(typeName);　　if ( typePoint == -1 ) return false;　　//没有此类别，无法删除，返回假 
　　　　var types=this.carDatas.length; 
　　　　this.carDatas[typePoint] = this.carDatas[types-1];　　　　　　　　　　　　//删除类别 
　　　　this.carDatas.pop(); 
　　　　this.saveCookie();　　//存入 Cookie 
　　　　return true; 
　　} 
　　 
　　/** 
　　@desc 删除此购物车 
　　@return void 
　　*/ 
　　this.delCar=function(){ 
　　　　this.cookie.setCookie(this.carName,'',0); 
　　　　this.carDatas=new Array(); 
　　　　this.saveCookie();　　//存入 Cookie 
　　} 
　　 
　　/** 
　　@desc 获得购物车数据 
　　@return Array 
　　*/ 
　　this.getCar=function(){ 
　　　　return this.carDatas; 
　　} 
　　 
　　/** 
　　@desc 获得类别列表 
　　@return Array 
　　*/ 
　　this.getType=function(){ 
　　　　var returnarr=new Array(); 
　　　　for ( i=0; i<this.carDatas.length; i++)　　　　returnarr.push(this.carDatas[i].name); 
　　　　return returnarr; 
　　} 
　　 
　　/** 
　　@desc 获得类别下的产品列表 
　　@return Array 
　　*/ 
　　this.getPro=function(typeName){ 
　　　　var typePoint=this.getTypePoint(typeName);　　if ( typePoint == -1 ) return false;　　//没有此类别，返回假 
　　　　return this.carDatas[typePoint].value; 
　　} 
　　 
　　/** 
　　@desc 获得商品属性 
　　@return String 
　　*/ 
　　this.getProVal=function(typeName,proName){ 
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint == -1 ) return false;　　//没有此类别，返回假 
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint == -1 ) return false;　　//没有此产品，返回假 
　　　　return this.carDatas[typePoint].value[proPoint].value; 
　　} 
}