基于html5 localStorage的购物车JS脚本
[javascript]
utils = {
setparam : function (name,value){
localstorage.setitem(name,value)
},
getparam : function(name){
return localstorage.getitem(name)
}
}
product={
id:0,
name:"",
num:0,
price:0.00,
};
orderdetail={
username:"",
phone:"",
address:"",
zipcode:"",
totalnumber:0,
totalamount:0.00
}
cart = {
//向购物车中添加商品
addproduct:function(product){
var shoppingcart = utils.getparam("shoppingcart");
if(shoppingcart==null||shoppingcart==""){
//第一次加入商品
var jsonstr = {"productlist":[{"id":product.id,"name":product.name,"num":product.num,"price":product.price}],"totalnumber":product.num,"totalamount":(product.price*product.num)};
utils.setparam("shoppingcart","'"+json.stringify(jsonstr));
}else{
var jsonstr = json.parse(shoppingcart.substr(1,shoppingcart.length));
var productlist = jsonstr.productlist;
var result=false;
//查找购物车中是否有该商品
for(var i in productlist){
if(productlist[i].id==product.id){
productlist[i].num=parseint(productlist[i].num)+parseint(product.num);
result = true;
}
}
if(!result){
//没有该商品就直接加进去
productlist.push({"id":product.id,"name":product.name,"num":product.num,"price":product.price});
}
//重新计算总价
jsonstr.totalnumber=parseint(jsonstr.totalnumber)+parseint(product.num);
jsonstr.totalamount=parsefloat(jsonstr.totalamount)+(parseint(product.num)*parsefloat(product.price));
orderdetail.totalnumber = jsonstr.totalnumber;
orderdetail.totalamount = jsonstr.totalamount;
//保存购物车
utils.setparam("shoppingcart","'"+json.stringify(jsonstr));
}
},
//修改给买商品数量
updateproductnum:function(id,num){
var shoppingcart = utils.getparam("shoppingcart");
var jsonstr = json.parse(shoppingcart.substr(1,shoppingcart.length));
var productlist = jsonstr.productlist;
for(var i in productlist){
if(productlist[i].id==id){
jsonstr.totalnumber=parseint(jsonstr.totalnumber)+(parseint(num)-parseint(productlist[i].num));
jsonstr.totalamount=parsefloat(jsonstr.totalamount)+((parseint(num)*parsefloat(productlist[i].price))-parseint(productlist[i].num)*parsefloat(productlist[i].price));
productlist[i].num=parseint(num);
orderdetail.totalnumber = jsonstr.totalnumber;
orderdetail.totalamount = jsonstr.totalamount;
utils.setparam("shoppingcart","'"+json.stringify(jsonstr));
return;
}
}
},
//获取购物车中的所有商品
getproductlist:function(){
var shoppingcart = utils.getparam("shoppingcart");
var jsonstr = json.parse(shoppingcart.substr(1,shoppingcart.length));
var productlist = jsonstr.productlist;
orderdetail.totalnumber = jsonstr.totalnumber;
orderdetail.totalamount = jsonstr.totalamount;
return productlist;
},
//判断购物车中是否存在商品
existproduct:function(id){
var shoppingcart = utils.getparam("shoppingcart");
var jsonstr = json.parse(shoppingcart.substr(1,shoppingcart.length));
var productlist = jsonstr.productlist;
var result=false;
for(var i in productlist){
if(productlist[i].id==product.id){
result = true;
}
}
return result;
},
//删除购物车中商品
deleteproduct:function(id){
var shoppingcart = utils.getparam("shoppingcart");
var jsonstr = json.parse(shoppingcart.substr(1,shoppingcart.length));
var productlist = jsonstr.productlist;
var list=[];
for(var i in productlist){
if(productlist[i].id==id){
jsonstr.totalnumber=parseint(jsonstr.totalnumber)-parseint(productlist[i].num);
jsonstr.totalamount=parsefloat(jsonstr.totalamount)-parseint(productlist[i].num)*parsefloat(productlist[i].price);
}else{
list.push(productlist[i]);
}
}
jsonstr.productlist = list;
orderdetail.totalnumber = jsonstr.totalnumber;
orderdetail.totalamount = jsonstr.totalamount;
utils.setparam("shoppingcart","'"+json.stringify(jsonstr));
}
};
使用也很简单:
[javascript]
var product =
{
'id': id, //属性名用引号括起来,属性间由逗号隔开
'name': 'hhh',
'num':jq('#text-4').val(),
'price':199.9
};
//商品加入到购物车
cart.addproduct(product);
var productlist=cart.getproductlist();//取出购物车商品
alert('', '商品:'+productlist[0].id+' '+productlist[0].name+' '+productlist[0].num+' '+productlist[0].price, '确定');
上一篇: HTC 搜索键短按锁屏长按弹出关机菜单
下一篇: 学习墨鱼汤的做法大全,让你品出新美味
推荐阅读
-
JS实现本地存储信息的方法(基于localStorage与userData)
-
基于JS脚本语言的基础语法详解
-
基于html5 localStorage的购物车JS脚本
-
基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
-
基于html5 localStorage , web SQL, websocket的简单聊天程序
-
recorder.js 基于Html5录音功能的实现
-
Chart.js 1.0 beta发布,基于HTML5的轻量图表库
-
基于JS脚本语言的基础语法详解
-
基于html5 localStorage的购物车JS脚本
-
recorder.js 基于Html5录音功能的实现