用localStorage存储购物车数据实战

24次阅读

共计 593 个字符,预计需要花费 2 分钟才能阅读完成。

最近做了一个商城项目,那肯定要做个购物车的嘛,于是我就想用 localstorage 存储商品,以便用户下次进入网页还可以看到自己收藏过的商品。业务方面,就保存商品数量、商品 id 和商品详情就好了。

接下来是项目实战

// 加购物车
  let k = 0; // 定义一个参数,用在循环中计算是否有这个商品 id,如果没有,就把商品添加到 gifts 中,如果有,那这个商品的 num 增加
  let gift = {
    id: this.giftDetail.goods_id,
    gift: this.giftDetail,
    num: this.num
  };
  let gifts = localStorage.getItem("gifts")
    ? JSON.parse(localStorage.getItem("gifts"))
    : [];
  for (let i = 0; i < gifts.length; i++) {let item = gifts[i];
    if (item.id === gift.id) {item.num += gift.num;} else {k = k + 1;}
  }
  if (k === gifts.length) {gifts.push(gift);
  }

 localStorage.setItem("gifts", JSON.stringify(gifts));

注意点:

  1. 数组存 localstorage 是需要序列化的,否则会自动调用 toString() 方法。
  2. 需要用 k 来计算是否有这个商品是否存在。

正文完
 0