javascript 购物车

购物车相当于现实中超市的购物车，不同的是一个是实体车，一个是虚拟车而已。用户可以在购物网站的不同页面之间跳转，以选购自己喜爱的商品，点击购买时，该商品就自动保存到你的购物车中，重复选购后，最后将选中的所有商品放在购物车中统一到付款台结账，这也是尽量让客户体验到现实生活中购物的感觉。服务器通过追踪每个用户的行动，以保证在结账时每件商品都物有其主。

     购物车的功能包括以下几项：

n         把商品添加到购物车，即订购

n         删除购物车中已定购的商品

n         修改购物车中某一本图书的订购数量

n         清空购物车

n         显示购物车中商品清单及数量、价格

     实现购物车的关键在于服务器识别每一个用户并维持与他们的联系。但是HTTP协议是一种“无状态(Stateless)”的协议，因而服务器不能记住是谁在购买商品，当把商品加入购物车时，服务器也不知道购物车里原先有些什么，使得用户在不同页面间跳转时购物车无法“随身携带”，这都给购物车的实现造成了一定的困难。

     目前购物车的实现主要是通过cookie、session或结合数据库的方式。下面分析一下它们的机制及作用。

1. cookie

     cookie是由服务器产生，存储在客户端的一段信息。它定义了一种Web服务器在客户端存储和返回信息的机制，cookie文件它包含域、路径、生存期、和由服务器设置的变量值等内容。当用户以后访问同一个Web服务器时，浏览器会把cookie原样发送给服务器。通过让服务器读取原先保存到客户端的信息，网站能够为浏览者提供一系列的方便，例如在线交易过程中标识用户身份、安全要求不高的场合避免用户重复输入名字和密码、门户网站的主页定制、有针对性地投放广告等等。利用cookie的特性，大大扩展了WEB应用程序的功能，不仅可以建立服务器与客户机的联系，因为cookie可以由服务器定制，因此还可以将购物信息生成cookie值存放在客户端，从而实现购物车的功能。用基于cookie的方式实现服务器与浏览器之间的会话或购物车，有以下特点：

n         cookie存储在客户端，且占用很少的资源，浏览器允许存放300个cookie，每个cookie的大小为4KB，足以满足购物车的要求，同时也减轻了服务器的负荷；

n         cookie为浏览器所内置，使用方便。即使用户不小心关闭了浏览器窗口，只要在cookie定义的有效期内，购物车中的信息也不会丢失；

n         cookie不是可执行文件，所以不会以任何方式执行，因此也不会带来病毒或攻击用户的系统；

n         基于cookie的购物车要求用户浏览器必须支持并设置为启用cookie，否则购物车则失效；

n         存在着关于cookie侵犯访问者隐私权的争论，因此有些用户会禁止本机的cookie功能。

2. session

     session是实现购物车的另一种方法。session提供了可以保存和跟踪用户的状态信息的功能，使当前用户在session中定义的变量和对象能在页面之间共享，但是不能为应用中其他用户所访问，它与cookie最重大的区别是，session将用户在会话期间的私有信息存储在服务器端，提高了安全性。在服务器生成session后，客户端会生成一个sessionid识别号保存在客户端，以保持和服务器的同步。这个sessionid是只读的，如果客户端禁止cookie功能，session会通过在URL中附加参数，或隐含在表单中提交等其他方式在页面间传送。因此利用session实施对用户的管理则更为安全、有效。

     同样，利用session也能实现购物车，这种方式的特点是：

n         session用新的机制保持与客户端的同步，不依赖于客户端设置；

n         与cookie相比，session是存储在服务器端的信息，因此显得更为安全，因此可将身份标示，购物等信息存储在session中；

n         session会占用服务器资源，加大服务器端的负载，尤其当并发用户很多时，会生成大量的session，影响服务器的性能；

n         因为session存储的信息更敏感，而且是以文件形式保存在服务器中，因此仍然存在着安全隐患。

3. 结合数据库的方式

     这也是目前较普遍的模式，在这种方式中，数据库承担着存储购物信息的作用，session或cookie则用来跟踪用户。这种方式具有以下特点：

n         数据库与cookie分别负责记录数据和维持会话，能发挥各自的优势，使安全性和服务器性能都得到了提高；

n         每一个购物的行为，都要直接建立与数据库的连接，直至对表的操作完成后，连接才释放。当并发用户很多时，会影响数据库的性能，因此，这对数据库的性能提出了更高的要求；

n         使cookie维持会话有赖客户端的支持。

各种方式的选择：

     虽然cookie可用来实现购物车，但必须获得浏览器的支持，再加上它是存储在客户端的信息，极易被获取，所以这也限制了它存储更多，更重要的信息。所以一般cookie只用来维持与服务器的会话，例如国内最大的当当网络书店就是用 cookie保持与客户的联系，但是这种方式最大的缺点是如果客户端不支持cookie就会使购物车失效。

     Session 能很好地与交易双方保持会话，可以忽视客户端的设置。在购物车技术中得到了广泛的应用。但session的文件属性使其仍然留有安全隐患。

结合数据库的方式虽然在一定程度上解决了上述的问题，但从上面的例子可以看出：在这种购物流程中涉及到对数据库表的频繁操作，尤其是用户每选购一次商品，都要与数据库进行连接，当用户很多的时候就加大了服务器与数据库的负荷。
/*****************************************************************************************************
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;
　　}
}

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/4913.htm