来自 前端技术 2019-09-07 20:35 的文章
当前位置: 六合联盟网 > 前端技术 > 正文

Javascript操纵Cookie实现购物车程序

复制代码 代码如下:

/*****************************************************************************************************
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时,不会产出难题。假使要循环存款和储蓄的话,恐怕晤面世略微存入,而略带未存入
   解决措施:见下例(获得UTucsonL里的sales的数码,并存入库克ie)

文本:/depot/compareproduct.php 中的JS代码片段
<script language="javascript">
var car=new Car('compare');
var typeName='list';
car.delType(typeName);    //将先前相比较的出品清除

//获得USportageL里的参数,并分隔成数组
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],'');  //扩大比较产品,假诺存在,再次回到假
    }
    set提姆eout('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;
  }
}

代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林)url...

本文由六合联盟网发布于前端技术,转载请注明出处:Javascript操纵Cookie实现购物车程序

关键词: