JavaScript基于Cookie实现购物车功能完整代码解析

/***************************************************************************************************** 
名称：购物车
版本：1.1
作者：Vanni(凡林) 网址：www.27sea.com QQ：303590170
创建日期：2005-05-31
描述说明
该组件基于JavaScript与客户端Cookie技术构建，使用前需确保用户浏览器已启用Cookie功能。
数据有效期默认为24乘以30小时，用户可通过设置 this.expire 属性来指定具体的过期小时数。
类内部定义了两个内置对象 typeObj 和 proObj，它们均包含 name 和 value 两个相同名称的属性。
类内部的数据存储结构如下所示：
数组(
new typeObj('汽车',array(
new proObj('三菱',200),
new proObj('本田',500)
) 
　　), 
new typeObj('蛋',array(
new proObj('鸡蛋',10),
new proObj('鸭蛋',20)
　　) 
} 
Cookie存储格式（使用escape()函数进行加密处理）如下：
购物车名 = 汽车#三菱:200|本田:500,蛋#鸡蛋:10|鸭蛋:20
注意：在客户端直接存储Cookie时通常不会出现问题。但如果尝试通过循环方式连续存储，可能会出现部分数据存入成功而部分失败的情况。
解决方法请参考下方示例（获取URL中的sales参数数量，并将其存入Cookie）。
URL参数同步与存储问题解决示例涉及文件：/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],''); //增加对比产品，若已存在则返回false
　　　　} 
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读写封装类实现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;
　　}　　 
} 
购物车核心类Car定义与公共方法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; //如果已经有此类别了，返回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; //没有此类别，无法增加，返回false
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint != -1 ) return false; //有此产品了，无法增加重复，返回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; //没有此类别，无法修改，返回false
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint == -1 ) return false; //没有此产品，无法修改，返回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; //没有此类别，无法删除，返回false
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint == -1 ) return false; //没有此产品，无法删除，返回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; //没有此类别，无法删除，返回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; //没有此类别，返回false
return this.carDatas[typePoint].value;
　　} 
　　 
　　/** 
@desc 获得商品属性
@return String
　　*/ 
this.getProVal=function(typeName,proName){
var typePoint=this.getTypePoint(typeName); if ( typePoint == -1 ) return false; //没有此类别，返回false
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint == -1 ) return false; //没有此产品，返回false
return this.carDatas[typePoint].value[proPoint].value;
　　} 
}