用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


[本日志由 admin 于 2017-10-12 12:30 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 12494
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭