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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
JS与C#编码解码
Dec 03 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
删除重复数据的算法
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
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php实现两个数组相加的方法
2015/02/17 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
javascript的内存管理详解
2013/08/07 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
Python每天必学之bytes字节
2016/01/28 Python
Django自定义分页效果
2017/06/27 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python的等深分箱实例
2019/11/22 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
自我评价怎么写好呢?
2013/12/05 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
元旦标语大全
2014/10/09 职场文书
预备党员转正材料
2014/12/19 职场文书
公司员工管理制度
2015/08/04 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android