vue-购物车系列

利用本地存储localStorage实现购物车

加入购物车

 addCars(goods) {
      // console.log(goods);
      // this.cars.unshift(goods);
      // console.log(this.carsList);
      // localStorage.setItem('car',index)
      let flag = 0;
      //遍历数组
      this.cars.some(val => {
      //判断同一商品是否重复点击加入购物车
        if (val.project_id === goods.project_id) {
      //重复添加同一商品，数量++
          // console.log(goods.project_id);
          val.num++;
          flag = 1;
          return true;
        }
        // console.log(JSON.parse(localStorage.getItem("cars")));
      });
     //添加新商品，加进数组
      if (flag === 0) {
        this.cars.unshift(goods);
      }
      // console.log(this.cars);
      //进行本地存储
      localStorage.setItem("cars", JSON.stringify(this.cars));
      this.carsList = JSON.parse(localStorage.getItem("cars"));
    }

 增加购物车中商品的数量

遍历购物车查找同一个商品，进行加减

add(index) {
      // console.log(index.num);
      this.cars.some(val => {
        if (val.project_id === index.project_id) {
          val.num++;
          return true;
        }
        // console.log(JSON.parse(localStorage.getItem("cars")));
      });

      localStorage.setItem("cars", JSON.stringify(this.cars));
      this.carsList = JSON.parse(localStorage.getItem("cars"));
}

 减少购物车中商品的数量

reduce(index) {
      // console.log(index);
      // console.log(index.num);
     //遍历购物车查找同一个商品，进行加减
      this.cars.some(val => {
        if (val.project_id === index.project_id) {
          if (val.num <= 0) {
            val.num = 0;
          } else {
            val.num--;
          }
          return true;
        }
        // console.log(JSON.parse(localStorage.getItem("cars")));
      });
      localStorage.setItem("cars", JSON.stringify(this.cars));
      this.carsList = JSON.parse(localStorage.getItem("cars"));
}

删除商品

// 删除商品
    closeProject(index) {
      // console.log(index);

      this.cars.some(val => {
        if (val.project_id === index.project_id) {
          //从数组中删除数据
          this.cars.splice(val, 1);
          // console.log(this.cars);
          //重新进行本地存储
          localStorage.setItem("cars", JSON.stringify(this.cars));
          return true;
        }
      });
      //重新获取本地存储，刷新数据
      this.carsList = JSON.parse(localStorage.getItem("cars"));
 }