Javascript操纵Cookie实现购物车程序


Posted in Javascript onNovember 23, 2006
/***************************************************************************************************** 
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; 

} 
}
Javascript 相关文章推荐
JavaScript prototype对象的属性说明
Mar 13 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
js实现简易聊天对话框
Aug 17 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
删除重复数据的算法
Nov 23 #Javascript
在JavaScript中实现命名空间
Nov 23 #Javascript
js变量作用域及可访问性的探讨
Nov 23 #Javascript
bcastr2.0 通用的图片浏览器
Nov 22 #Javascript
一种JavaScript的设计模式
Nov 22 #Javascript
表单内同名元素的控制
Nov 22 #Javascript
document.all与WEB标准
May 13 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
javascript this用法小结
2008/12/19 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python处理二进制数据的方法
2015/06/03 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python正则-re的用法详解
2019/07/28 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
社会保险接收函
2014/01/12 职场文书
超市5.1促销活动
2014/01/15 职场文书
欢送退休感言
2014/02/08 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
买卖合同协议书范本
2014/10/18 职场文书
兴趣班停课通知
2015/04/24 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
班主任工作总结范文
2015/08/13 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android