点击这里给我发消息 点击这里给我发消息

基于html5 localStorage的购物车JS脚本

添加时间:2013-12-6
    相关阅读: 相关内容
最近在做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, '确定'); 
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册