首页前端开发HTML基于html5 localStorage的购物车JS脚本

基于html5 localStorage的购物车JS脚本

时间2024-01-25 10:57:21发布访客分类HTML浏览105
导读：收集整理的这篇文章主要介绍了html5教程-基于html5 localStorage的购物车JS脚本，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。...
收集整理的这篇文章主要介绍了html5教程-基于html5 localStorage的购物车JS脚本，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 最近在做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, '确定');  

                  

 

最近在做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, '确定');  

                  

 

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

divHTMLhtml5letpost-format-gallery

若转载请注明出处： 基于html5 localStorage的购物车JS脚本
本文地址： https://pptw.com/jishu/586440.html
HTML5 Web Workers 在DataGrid的GridColumn列中加入按钮宣染器

游客 回复需填写必要信息
↑