当前位置:首页>网络学院>网页制作>Javascript教程>文章内容

JS+COOKIES实现购物车功能

[ 来源:http://www.it55.com | 作者: | 时间:2007-12-04 | 收藏 | 推荐 ] 【

  近日正在写个商城系统,打算自己开个服装店的,o(∩_∩)o...哈哈
  
   大家都知道商城系统中是离不开购物车的,据观察,网上大多数商城程序的购物车都是采用的一种比较简单的存储方式来实现购物车,那就是把选中了的ID直接拼接起来。这种做法当然在需求不高的情况下足矣,可是想要拥有一个更健壮的购物车的话,却不能满足了。
  
   我的方法是将购物车内商品的几个基本必要属性都要存储起来,如:品名、数量、当前价格、图片地址等等。
  
  这些属性我们怎么来存呢?
   方法不是唯一的,数据库、SESSION、Cookies……,可能大部分朋友会选用数据库,我选用的是COOKIES,因为购物车仅仅用来为用户购买商品提供个便利的集中容器,既然是临时用的,何必要劳驾数据库呢?我写程序的原则是:要尽可能的给服务器减压。用COOKIES来存储,就是存储在客户端。
  
  存储我们选用了COOKIES,那么接下来就应该是如何来操作这个"小甜饼"了.
  如何来操作COOKIES,实现购物车呢?
   还是那句话,尽可能给服务器减压,既然存储用了客户端的东东,那么我们操作当然也可以用客户端的东东啊,那就是JAVASCRIPT了,嗯,JS是可以直接读写COOKIES的。以下是JS读写COOKIES的代码:
  // JScript 文件
  /**//*
  by 码农.KEN (2007-11-9)
  */
  var cookie={
  //读取COOKIES,n为COOKIE名
   Get:function(n){
   var re=new RegExp(n+'=([^;]*);?','gi');
   var r=re.exec(document.cookie)||[];
   return (r.length>1?r[1]:null)
   },
   Get1:function(n){
   var re=new RegExp(n+'=([^;]*);?','gi');
   var r=re.exec(document.cookie)||[];
   return unescape(r.length>1?r[1]:null)
   },
   //写入COOKIES,n为Cookie名,v为value
   Set:function(n,v,e,p,d,s){
   var t=new Date;
   if(e){
   // 8.64e7 一天 3.6e6 一小时
   t.setTime(t.getTime() + (e*3.6e6));
  
   }
   document.cookie=n+'='+v+'; '+(!e?'':'; expires='+t.toUTCString())+(!p?'':'; path='+p)+(!d?'':'; domain='+d)+(!s?'':'; secure') // Set cookie
   },
   Set1:function(n,v,e,p,d,s){
   var t=new Date;
   if(e){
   // 8.64e7 一天 3.6e6 一小时
   t.setTime(t.getTime() + (e*8.64e7));
  
   }
   document.cookie=n+'='+escape(v)+'; '+(!e?'':'; expires='+t.toUTCString())+(!p?'':'; path='+p)+(!d?'':'; domain='+d)+(!s?'':'; secure') // Set cookie
   },
   Del:function(n,p,d){
   var t=cookie.Get(n);
   document.cookie=n+'='+(!p?'':'; path='+p)+(!d?'':'; domain='+d)+'; expires=Thu, 01-Jan-70 00:00:01 GMT';
   return t
   }
  };
  //var TotalPro = cookie.Get("TotalPro"); //当前车内含有商品的总数
  下面该说说JS具体如何来操作购物车了,在这里,购物车需要的操作有:增加商品、修改商品、删除商品。
  这些操作偶就直接贴代码了,都做了注释的,如果有不明之处可以回帖,我尽力作答。
  
  说明下:如果JS本身具有能直接操作带有子键的COOKIES的话,那完全没有必要写出下面那么多行的代码了!
  var Common = {
  
   //移除数组中指定项
  
   delArr:function(ar,n) { //n表示第几项,从0开始算起。
   if(n<0) //如果n<0,则不进行任何操作。
   return ar;
   else
   return ar.slice(0,n).concat(ar.slice(n+1,ar.length));
   },
  
   //添加至购物车
   intoCar:function(proid,quantity,proname,imgurl,_price) {
   if(proid != "" && proname != "") {
   var ProIDList = cookie.Get("carList"); //车内商品ID列表
   if(ProIDList!=null && ProIDList!="" && ProIDList!="null")
   {
   if(Common.hasOne(proid))
   {
   ProIDList += "&"+proid+"="+proid+"|"+quantity+"|"+escape(proname)+"|"+escape(imgurl)+"|"+_price;
   cookie.Set("carList",ProIDList,2,"/");//更新购物车清单
   TotalPro = cookie.Get("TotalPro"); //当前车内含有商品的总数
   TotalPro++; //总数+1
   cookie.Set("TotalPro",TotalPro,2,"/");
   }
   else
   {
   alert("购物车中已含有此商品");
   }
   }
   else {
  

(编辑:IT资讯之家 www.it55.com

返回顶部
共3页: 上一页 1 [2] [3] 下一页  

网友评论

[以下评论为网友观点,不代表本站。请自觉遵守互联网相关政策法规,所有连带责任均有评论者自负。]
[不超过250字]

图片文章