欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于html5 localStorage的购物车JS脚本

程序员文章站 2022-05-20 18:46:09
最近在做html5这一块,参考网上的代码写了一个购物车js脚本,很简单,直接上代码,shoppingcart.js: [javascript]   utils = {   &nb...
最近在做html5这一块,参考网上的代码写了一个购物车js脚本,很简单,直接上代码,shoppingcart.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, '确定');