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

最近在做html5這一塊，參考網上的代碼寫了一個購物車JS腳本，很簡單，直接上代碼，shoppingCart.js：

1. utils = {
2. setParam : function (name,value){
3. localStorage.setItem(name,value)
4. },
5. getParam : function(name){
6. return localStorage.getItem(name)
7. }
8. }
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;
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);
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. };

使用也很簡單：

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腳本