用VUE+localstorage+lodash.js实现购物车本地存储

在任何一个购物页面,只要购买了商品,就可以将购买量存储到缓存,实现跨页面共享数据。这个原理也可以用来管理其它较复杂的跨页面结构。

demo地址:

 
几个技术要点:
  • 使用js-storage这个js库来实现对localstorage的读写及判断,比自己写原生要简单。因为localstorage默认存储是字符形式,如果要存储对象、数据这些,还要自己写转换,用库就简单得多了。另外还用isEmpty对“空结构”做判断。
  • 基于VUE做了一个单独的mixin_cart,要引入购物车的页面都可以使用这个mixin
  • 用一个数据结构(cart)来完整的映射“购物车”,针对它写了一些API:
  • init_cart----从local读数据来形成cart
  • get_cart_item_count----得到某件商品的购买量
  • write_cart------新建/改写商品数据
  • sum_cart-------汇总购买量
  • clear_cart------待加
  • 使用watch监听页面中的数据变化,一旦发生变化,就扫描数据结构,把购买量的变化使用write_cart映射到cart-->并存储到localstorage。注意watch监听数组或是对象这样的复杂结构,要使用handler+deep: true写法。
  • 一些算法使用了lodash.js,比如:
  • 查找符合条件的商品-- _.find
  • 从数组中删除商品---_.pull
  • 汇总商品购买量------_.sumBy


  • [本Beplay由 admin 于 2017-10-12 12:30 AM 编辑]
    文章来自: 本站原创
    引用通告: 查看所有引用 | 我要引用此文章
    Tags:
    相关Beplay:
    评论: 0 | 引用: 0 | 查看次数: 7066
    发表评论
    昵 称:
    密 码:
    游客发言不需要密码.
    邮 箱:
    支持Gravatar头像.
    网 址:
    输入网址便于回访.
    内 容:
    验证码:
    选 项:

    虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
    字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭