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 相关文章推荐
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
删除重复数据的算法
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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
JavaScript打字小游戏代码
2011/12/26 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
js实现简易计算器功能
2019/10/18 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
校园招聘策划书
2014/01/09 职场文书
学习方法演讲稿
2014/05/10 职场文书
2014年师德承诺书
2014/05/23 职场文书
员工安全生产责任书
2014/07/22 职场文书
圣诞晚会主持词
2015/07/01 职场文书
思想工作总结范文
2015/08/12 职场文书
预备党员表决心的话
2015/09/22 职场文书
python glom模块的使用简介
2021/04/13 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
总结Python连接CS2000的详细步骤
2021/06/23 Python