使用LocalStorage实现购物车功能
一:明确功能需求
通京东购物商城思考购物车的相关特性。(淘宝有所不同)
在我们使用购物车时,需要注意的是关于购物车使用的时机:登录账号前、登录账号后。
我们会发现无论有没有登录账号,都能够往购物车中添加商品,即使当我们关闭浏览器后重新打开浏览器购物车中商
品也还在;并且在登录账号之后,购物车中添加的商品并不会消失。
通过这个我们可以考虑到,购物车中的商品信息我们是保存在我们本地的。
这个我们用H5中的新特性LocalStorage来实现!
主要需求:非登录状态添加购物车、登录后还持有非登录状态下的购物车信息。
二:主要实现
思路:
在点击加入购物车是,将需要加入购物车的商品信息保存到LocalStorage中。包括商品的名称、价格以及添加时间等各类信息。
并且购物车上面的显示商品个数的图标内容也随之改变。
当登录账号后,进入个人购物车,购物车内商品信息从LocalStorage中获取,并插入到相关数据库表中。
在完成之后,将本地LocalStorage内保存的信息清除掉。