首页 > 代码库 > 基于html5 localStorage的购物车JS脚本

基于html5 localStorage的购物车JS脚本

2024-11-04 17:55:39   206人阅读

http://blog.csdn.net/wangqiuyun/article/details/8435649

 

最近在做html5这一块，参考网上的代码写了一个购物车JS脚本，很简单，直接上代码，shoppingCart.js：

 

[javascript] view plain copy
 
  1. utils = {  
  2.     setParam : function (name,value){  
  3.         localStorage.setItem(name,value)  
  4.     },  
  5.     getParam : function(name){  
  6.         return localStorage.getItem(name)  
  7.     }  
  8. }  
  9.   
  10. product={  
  11.     id:0,  
  12.     name:"",  
  13.     num:0,  
  14.     price:0.00,  
  15. };  
  16. orderdetail={  
  17.     username:"",  
  18.     phone:"",  
  19.     address:"",  
  20.     zipcode:"",  
  21.     totalNumber:0,  
  22.     totalAmount:0.00      
  23. }  
  24. cart = {  
  25.     //向购物车中添加商品  
  26.     addproduct:function(product){  
  27.         var ShoppingCart = utils.getParam("ShoppingCart");  
  28.         if(ShoppingCart==null||ShoppingCart==""){  
  29.             //第一次加入商品  
  30.             var jsonstr = {"productlist":[{"id":product.id,"name":product.name,"num":product.num,"price":product.price}],"totalNumber":product.num,"totalAmount":(product.price*product.num)};  
  31.             utils.setParam("ShoppingCart","‘"+JSON.stringify(jsonstr));  
  32.         }else{  
  33.             var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
  34.             var productlist = jsonstr.productlist;  
  35.             var result=false;  
  36.             //查找购物车中是否有该商品  
  37.             for(var i in productlist){  
  38.                 if(productlist[i].id==product.id){  
  39.                     productlist[i].num=parseInt(productlist[i].num)+parseInt(product.num);  
  40.                     result = true;  
  41.                 }  
  42.             }  
  43.             if(!result){  
  44.                 //没有该商品就直接加进去  
  45.                 productlist.push({"id":product.id,"name":product.name,"num":product.num,"price":product.price});  
  46.             }  
  47.             //重新计算总价  
  48.             jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+parseInt(product.num);  
  49.             jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+(parseInt(product.num)*parseFloat(product.price));  
  50.             orderdetail.totalNumber = jsonstr.totalNumber;  
  51.             orderdetail.totalAmount = jsonstr.totalAmount;  
  52.             //保存购物车  
  53.             utils.setParam("ShoppingCart","‘"+JSON.stringify(jsonstr));  
  54.         }  
  55.     },  
  56.     //修改给买商品数量  
  57.     updateproductnum:function(id,num){  
  58.         var ShoppingCart = utils.getParam("ShoppingCart");  
  59.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
  60.         var productlist = jsonstr.productlist;  
  61.           
  62.         for(var i in productlist){  
  63.             if(productlist[i].id==id){  
  64.                 jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+(parseInt(num)-parseInt(productlist[i].num));  
  65.                 jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+((parseInt(num)*parseFloat(productlist[i].price))-parseInt(productlist[i].num)*parseFloat(productlist[i].price));  
  66.                 productlist[i].num=parseInt(num);  
  67.                   
  68.                 orderdetail.totalNumber = jsonstr.totalNumber;  
  69.                 orderdetail.totalAmount = jsonstr.totalAmount;  
  70.                 utils.setParam("ShoppingCart","‘"+JSON.stringify(jsonstr));  
  71.                 return;  
  72.             }  
  73.         }  
  74.     },  
  75.     //获取购物车中的所有商品  
  76.     getproductlist:function(){  
  77.         var ShoppingCart = utils.getParam("ShoppingCart");  
  78.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
  79.         var productlist = jsonstr.productlist;  
  80.         orderdetail.totalNumber = jsonstr.totalNumber;  
  81.         orderdetail.totalAmount = jsonstr.totalAmount;  
  82.         return productlist;  
  83.     },  
  84.     //判断购物车中是否存在商品  
  85.     existproduct:function(id){  
  86.         var ShoppingCart = utils.getParam("ShoppingCart");  
  87.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
  88.         var productlist = jsonstr.productlist;  
  89.         var result=false;  
  90.         for(var i in productlist){  
  91.             if(productlist[i].id==product.id){  
  92.                 result = true;  
  93.             }  
  94.         }  
  95.         return result;  
  96.     },  
  97.     //删除购物车中商品  
  98.     deleteproduct:function(id){  
  99.         var ShoppingCart = utils.getParam("ShoppingCart");  
  100.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
  101.         var productlist = jsonstr.productlist;  
  102.         var list=[];  
  103.         for(var i in productlist){  
  104.             if(productlist[i].id==id){  
  105.                 jsonstr.totalNumber=parseInt(jsonstr.totalNumber)-parseInt(productlist[i].num);  
  106.                 jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)-parseInt(productlist[i].num)*parseFloat(productlist[i].price);  
  107.             }else{  
  108.                 list.push(productlist[i]);  
  109.             }  
  110.         }  
  111.         jsonstr.productlist = list;  
  112.         orderdetail.totalNumber = jsonstr.totalNumber;  
  113.         orderdetail.totalAmount = jsonstr.totalAmount;  
  114.         utils.setParam("ShoppingCart","‘"+JSON.stringify(jsonstr));  
  115.     }  
  116. };  

 

使用也很简单：

 

[javascript] view plain copy
 
    1. var product =  
    2. {  
    3.     ‘id‘: id,        //属性名用引号括起来，属性间由逗号隔开  
    4.     ‘name‘: ‘hhh‘,  
    5.     ‘num‘:jq(‘#text-4‘).val(),  
    6.     ‘price‘:199.9  
    7. };  
    8. //商品加入到购物车  
    9. cart.addproduct(product);  
    10. var productlist=cart.getproductlist();//取出购物车商品  
    11. alert(‘‘, ‘商品:‘+productlist[0].id+‘ ‘+productlist[0].name+‘ ‘+productlist[0].num+‘ ‘+productlist[0].price, ‘确定‘);  

基于html5 localStorage的购物车JS脚本


联系
我们