基于html5 localStorage的购物车JS脚本

Posted 2020-09-29 金在峰

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, ‘确定‘);