美文网首页
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