『网站资源』-JS操作COOKIES[咿思舞论坛]

以文本方式查看主题

-  咿思舞论坛  (http://bbs.145829.com/index.asp)
--  『网站资源』  (http://bbs.145829.com/list.asp?boardid=8)
----  JS操作COOKIES  (http://bbs.145829.com/dispbbs.asp?boardid=8&id=251)

--  作者：admin
--  发布时间：2009/9/15 10:34:01
--  JS操作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 {

   ProIDList=proid+"="+proid+"|"+quantity+"|"+escape(proname)+"|"+escape(imgurl)+"|"+_price;
   cookie.Set("carList",ProIDList,2,"/");//更新购物车清单

   cookie.Set("TotalPro",1,2,"/");
   }
   Common.reloadcar();//更新顶部个数显示
   //alert(ProIDList);
   }

   }, //添加物品结束

   //重置购物车内个数
   reloadcar:function()
   {
   var t=cookie.Get("TotalPro");
   if(t!=""&&t!="null")
   document.getElementById("cart_num").innerText="(" + cookie.Get("TotalPro") + ")";
   else
   document.getElementById("cart_num").innerText="(0)";
   }, //重置结束

   //检验购物车内是否已经含有该商品
   hasOne:function(pid){
   ProIDList = cookie.Get("carList"); //车内商品ID列表
   if(ProIDList.lastIndexOf("&") != -1){
   var arr=ProIDList.split("&");
   for(i=0;i<arr.length;i++)
   {
   //alert(arr.indexOf("="));
   if(arr.substr(0,arr.indexOf("="))==pid)
   {

   return false;
   }
   }
   }
   else if(ProIDList!="null"&&ProIDList!="")
   {
   if(ProIDList.substr(0,ProIDList.indexOf("="))==pid)
   return false;
   }
   return true;
   }, //检测结束

   //移除某商品
   reMoveOne:function(proid){

   if(!Common.hasOne(proid)){
   if(ProIDList.lastIndexOf("&") != -1){
   var arr=ProIDList.split("&");
   for(i=0;i<arr.length;i++){
   if(arr.substr(0,arr.indexOf("="))==proid) {

   var arr2=Common.delArr(arr,i);
   var tempStr=arr2.join("&"); //由数组重组字符串

   cookie.Set("carList",tempStr,2,"/");//更新购物车清单
   var t=cookie.Get("TotalPro");
   cookie.Set("TotalPro",t-1,2,"/");//更新Cookies中的个数
   // Common.reloadcar();//更新顶部个数显示
   return;
   }
   }
   }
   else{

   cookie.Set("carList","null");//更新购物车清单
   var t=cookie.Get("TotalPro");
   cookie.Set("TotalPro",0,2,"/");//更新购物车清单
   // Common.reloadcar();//更新顶部个数显示
   }
   }

   }, //移除物品结束

   //修改某物品数量
   updateQuantity:function(proid,quantity){
   ProIDList = cookie.Get("carList"); //车内商品ID列表
   if(ProIDList.lastIndexOf("&") != -1) {
   var arr=ProIDList.split("&");
   var sub=Common.getSubPlace(ProIDList,proid);//获取该物品在COOKIE数组中的下标位置
   var arr2=arr[sub].split("|");
   arr2[1]=quantity;
   var tempStr=arr2.join("|");//由数组重组字符串
   arr[sub] = tempStr;
   var newProList = arr.join("&");//由数组重组字符串
   cookie.Set("carList",newProList,2,"/");//更新购物车清单
   //alert(newProList);
   }
   else {

   var arr=ProIDList.split("|");
   arr[1]=quantity;
   var newProList=arr.join("|");
   cookie.Set("carList",newProList,2,"/");//更新购物车清单
   //alert(newProList);
   }


   }, //修改物品结束

   //返回指定物品所在数组的下标位置
   getSubPlace:function(list,proid){
   var arr=list.split("&");
   for(i=0;i<arr.length;i++){
   if(arr.substr(0,arr.indexOf("="))==proid) {
   return i;
   }
   }

   } //返回下标结束







   };

   至此，购物车的核心操作部分已经完毕，接下来就是如何体现出购物车内的东西了！

   在这里，我只写出ASP .NET来体现购物车的代码，^_^，因为其他的语言偶也不怎么熟悉。

   如果你已经看明白了上面的购物车添加商品的JS代码，那么你应该知道我们将如何来读取购物车内的物品了。前面我提到过带有子键的COOKIES，大家知道ASP .NET中，COOKIES是可以分组的，结构类似于：
   ["A1"]["11111"]
   ["A1"]["22222"]
   ["A1"]["33333"]
   上面的A1是一个COOKIES组，后面的111,222分别是这个组下面的子键，之前我们的JS在增加商品进入COOKIES的时候就是这样来存储的。每个商品的ID作为一个子键，然后商品的其他属性即为该子键的COOKIES值。那么你可能想问：多个属性是怎么存储的呢？很简单，直接把多个属性值用"|"隔开即可。
   ["carList"]["120"]="充气娃娃|5|500.50|cqww.jpg" //就类似于这种结构了

   以下给出ASP .NET来读取购物车中所有物品的代码，其实就那么一小段：
   public ArrayList GetItems()
   {
   HttpCookie c = HttpContext.Current.Request.Cookies["carList"];

   ArrayList items = new ArrayList();
   for (int i = 0; i < c.Values.Count; i++)
   {
   string[] vals = c.Values.Split(\'|\');
   MY_Shop.Model.CShoppingCartItem item = new MY_Shop.Model.CShoppingCartItem();
   item.ProductID = int.Parse(vals[0]);
   item.Quantity = int.Parse(vals[1]);
   item.ProductName = HttpContext.Current.Server.UrlDecode((string)vals[2]);
   item.ImgUrl = HttpContext.Current.Server.UrlDecode((string)vals[3]);
   item.Price_s = decimal.Parse(vals[4]);
   items.Add(item);
   }
   return items;
   }

   了解三层开发的朋友应该知道，上面代码中的MY_Shop.Model.CShoppingCartItem类实际上就是个实体类。为了不让新手感到迷惑，下面贴出实体类的代码：
   Code
   using System;
   namespace MY_Shop.Model
   {
   public class CShoppingCartItem : IShoppingCartItem
   {
   private int intProductID;
   private string strProductName;
   private string strImgUrl;
   private int intQuantity;
   private decimal decPrice_s;
   public int ProductID
   {
   get
   {
   return intProductID;
   }
   set
   {
   intProductID = value;
   }
   }
   public string ProductName
   {
   get
   {
   return strProductName;
   }
   set
   {
   strProductName = value;
   }
   }
   public string ImgUrl
   {
   get
   {
   return strImgUrl;
   }
   set
   {
   strImgUrl = value;
   }
   }
   public int Quantity
   {
   get
   {
   return intQuantity;
   }
   set
   {
   intQuantity = value;
   }
   }
   public decimal Price_s
   {
   get
   {
   return decPrice_s;
   }
   set
   {
   decPrice_s = value;
   }
   }
   }
   }