基于html5 localStorage的购物车JS脚本

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

使用也很简单：

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