美文网首页
用localstorage存储购物车数据实战

用localstorage存储购物车数据实战

作者: 前端陈晨 | 来源:发表于2019-06-06 10:25 被阅读0次

最近做了一个商城项目,那肯定要做个购物车的嘛,于是我就想用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来计算是否有这个商品是否存在。

相关文章

  • 用localstorage存储购物车数据实战

    最近做了一个商城项目,那肯定要做个购物车的嘛,于是我就想用localstorage存储商品,以便用户下次进入网页还...

  • TodoList-React

    要实现的功能 localStorage存储数据 使用localStorage存储用户数据,异步更新数据,实现在使用...

  • web存储、应用缓存、web workers

    客户端存储数据 两种方式: localStorage-没有时间限制的数据存储存储特点: localStorage方...

  • 2018-06-22

    localStorage--如何存储json数据? localStorage--如果直接将json存储在local...

  • 本地存储 与 cookie

    一、本地存储: (1)localStorage 保存数据:localStorage.setItem(key,...

  • Vue数据存储和页面传值

    数据存储和页面传值 数据存储 Vue 数据存储方法有Vuex、LocalStorage、SessionStorag...

  • 购物车

    web本地存储主要有两种方式: LocalStorage:localStorage 方法存储的数据没有时间限制。第...

  • localStorage本地缓存

    清空localStorage (clear) 存储数据 (setItem) 读取数据 (getItem) 删除某个...

  • localStorage存储数据

    介绍 localStorage: localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上...

  • HTML5 Web 存储(localStorage 和 sess

    localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage...

网友评论

      本文标题:用localstorage存储购物车数据实战

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