localStorage实现购物车

简介: shopCart.jsutils = { setParam : function (name,value){ localStorage.

shopCart.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.0,
};
orderdetail={
    username:"",
    phone:"",
    address:"",
    zipcode:"",
    totalNumber:0,
    totalAmount:0.0
}
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;
    },
    //不传id则判断购物车中是否存在商品,传id则判断购物车中是否存在某种商品
    existProduct:function(id){
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
        var productlist = jsonstr.productlist;
        var result=false;
        if(id!=null){
            for(var i in productlist){
                if(productlist[i].id==id){
                    result = true;
                }
            }
        }else{
            if(productlist.length>0){
                result=true;
            }
        }
        return result;
    },
    //不传id则删除购物车中所有商品,传id则删除某种商品
    clearProduct:function(id){
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
        var productlist = jsonstr.productlist;
        var list=[];
        if(id!=null){
            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));
    }
};

使用方法:

<script>
$(function(){
var product = {
    'id': 1,        //属性名用引号括起来,属性间由逗号隔开
    'name': '商品1',
    'num':1,
    'price':1
};
cart.addProduct(product);    //商品加入到购物车 
var productlist=cart.getProductList();    //取出购物车商品
console.log(productlist);
var isExist=cart.existProduct();
console.log(isExist);
cart.deleteProduct(1);
var isExist1=cart.existProduct();
console.log(isExist1);
})
</script>
目录
相关文章
|
1月前
|
存储 缓存 JavaScript
cookie、localStorage 和SessionStorage的区别和特点?
cookie、localStorage 和SessionStorage的区别和特点?
12 0
|
15天前
|
存储 缓存 移动开发
localstorage是什么
localstorage是什么
|
3月前
|
存储 缓存 前端开发
localStorage
localStorage 是一种浏览器本地存储技术,它可以在用户浏览器中存储数据,包括文本、图像、文件等等。相比于会话存储(sessionStorage),localStorage 的存储时间更长,可以跨多个会话保持数据。因此,localStorage 常常用于存储一些长时间需要保留的数据,例如用户设置、偏好、登录状态等等。 使用 localStorag
29 8
|
4月前
|
存储 JavaScript 前端开发
JS清空购物车后再次添加商品添加不上
JS清空购物车后再次添加商品添加不上
|
5月前
|
存储 JSON 数据格式
localStorage和sessionStorage的使用和区别
localStorage和sessionStorage的使用和区别
34 0
localStorage和sessionStorage的使用和区别
|
9月前
|
存储 缓存 前端开发
前端存储之sessionStorage和localStorage
前端存储之sessionStorage和localStorage
180 0
|
9月前
|
存储 JavaScript
vuex、localStorage、sessionStorage 存储区别
vuex、localStorage、sessionStorage 存储区别
64 0
uniapp——添加购物车数据以及删除购物车数据
添加购物车数据以及删除购物车数据
138 0
|
JavaScript
Vue/vant——渲染详情页添加购物车数据渲染到购物车页面,并进行删除数据效果
渲染详情页添加购物车数据渲染到购物车页面,并进行删除数据效果
137 0
|
存储 数据采集 Web App开发
【前端】localStorage与sessionStorage的使用和区别
localStorage与sessionStorage的使用和区别
172 0
【前端】localStorage与sessionStorage的使用和区别