Javascript操纵Cookie实现购物车程序


Posted in Javascript onFebruary 15, 2007
/***************************************************************************************************** 
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 相关文章推荐
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 #Javascript
用Javascript读取中文COOKIE的解决办法
Feb 15 #Javascript
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 #Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 #Javascript
从Ajax到JQuery Ajax学习
Feb 14 #Javascript
JAVASCRIPT对象及属性
Feb 13 #Javascript
js判断浏览器的比较全的代码
Feb 13 #Javascript
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
JS之小练习代码
2008/10/12 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
JavaScript实现换肤功能
2017/09/15 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
如何在JS文件中获取Vue组件
2020/09/16 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
C++面试题目
2013/06/25 面试题
Android面试题附答案
2014/12/08 面试题
计算机专业毕业生推荐信
2013/11/25 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
教师党员自我评价2015
2015/03/04 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript