用localStorage存储购物车数据实战

syoya 发布于2019-08-23 17:59 / 2559人阅读

摘要：最近做了一个商城项目，那肯定要做个购物车的嘛，于是我就想用存储商品，以便用户下次进入网页还可以看到自己收藏过的商品。业务方面，就保存商品数量商品和商品详情就好了。需要用来计算是否有这个商品是否存在。

最近做了一个商城项目，那肯定要做个购物车的嘛，于是我就想用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));

注意点：

数组存localstorage是需要序列化的，否则会自动调用toString()方法。

需要用k来计算是否有这个商品是否存在。

GPU云服务器云服务器 localstorage存储存储localstorage 免费localstorage存储对象大数据存储mongodb实战指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104469.html

Vue+Vue-router+Vuex项目实战

摘要：实现电商网站效果展示下载代码安装依赖启动项目运行环境需求分析登录页面商品列表页网站首页购物车页实现结算商品详情页可按颜色品牌对商品进行筛选，单击选中，再次点击取消根据价格进行升序降序销量降序排列商品列表显示图片名称销量颜色单价实时显示 shopping vue + vue-router + vuex实现电商网站效果展示 showImg(https://user-gold-cdn.xi...

zlyBear 2019-08-23 16:07 评论0 收藏0
Vue+Vue-router+Vuex项目实战

摘要：实现电商网站效果展示下载代码安装依赖启动项目运行环境需求分析登录页面商品列表页网站首页购物车页实现结算商品详情页可按颜色品牌对商品进行筛选，单击选中，再次点击取消根据价格进行升序降序销量降序排列商品列表显示图片名称销量颜色单价实时显示 shopping vue + vue-router + vuex实现电商网站效果展示 showImg(https://user-gold-cdn.xi...

Chiclaim 2019-08-30 15:56 评论0 收藏0
Vue+Vue-router+Vuex项目实战

摘要：实现电商网站效果展示下载代码安装依赖启动项目运行环境需求分析登录页面商品列表页网站首页购物车页实现结算商品详情页可按颜色品牌对商品进行筛选，单击选中，再次点击取消根据价格进行升序降序销量降序排列商品列表显示图片名称销量颜色单价实时显示 shopping vue + vue-router + vuex实现电商网站效果展示 showImg(https://user-gold-cdn.xi...

Half 2019-08-02 14:33 评论0 收藏0
Web Storage相关

摘要：当页面重新载入或者被恢复时，页面会话也是一直存在的。自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。该例中，我们测试数据项是否存在。访问原文地址概述 DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一...

kevin 2019-08-20 12:18 评论0 收藏0