美文网首页
vue实现购物车功能

vue实现购物车功能

作者: H_XMM | 来源:发表于2018-09-26 11:07 被阅读0次
在我们开发商城类的项目中,少不了开发购物车的功能,在刚开始接触购物车功能的时候也是一筹莫展,经过在度娘上搜索也没有完整的功能,所以就根据自己开发的实际项目,写一段完整的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
  }
}

相关文章

网友评论

      本文标题:vue实现购物车功能

      本文链接:https://www.haomeiwen.com/subject/wuxdoftx.html