基于html5 localStorage的購物車JS腳本

fefef123 9年前發布 | 5K 次閱讀 JavaScript HTML5

一個購物車JS腳本,很簡單,直接上代碼,shoppingCart.js:

    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));  
    }  
};  </pre> 


使用也很簡單:

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, '確定');  
         

 本文由用戶 fefef123 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!