vue实现购物车功能
2018-09-26 本文已影响0人
H_XMM
在我们开发商城类的项目中,少不了开发购物车的功能,在刚开始接触购物车功能的时候也是一筹莫展,经过在度娘上搜索也没有完整的功能,所以就根据自己开发的实际项目,写一段完整的js代码。
首先创建一个js文件,这里面使用的都是ES语法
//获取LocalStorage
let locals = window.localStorage;
let prodTools = {
//添加或者更新
addOrUpdate (prod) { //id:num
//获取原来的数据对象,查
let prods = this.getProds();
if(prods[prod.id]) {
//如果商品存在追加
prods[prod.id] += prod.num;
}else{
//商品部存在,直接赋值
prods[prod.id] = prod.num;
}
//保存
this.save(prods)
},
//删除
delProds(id){
let prods = this.getProds();
//prods[id] = null;
//删除key
delete prods[id];
this.save(prods);
},
getProds(){
//默认第一次,没有数据
return JSON.parse(locals.getItem('prods') || '{}');
},
save(prods){
locals
}
}