H5的localStorage实现购物车功能

使用LocalStorage实现购物车功能

 

 

    一：明确功能需求

            通京东购物商城思考购物车的相关特性。（淘宝有所不同）

                 在我们使用购物车时，需要注意的是关于购物车使用的时机：登录账号前、登录账号后。

                 我们会发现无论有没有登录账号，都能够往购物车中添加商品，即使当我们关闭浏览器后重新打开浏览器购物车中商

              品也还在；并且在登录账号之后，购物车中添加的商品并不会消失。

        通过这个我们可以考虑到，购物车中的商品信息我们是保存在我们本地的。

        这个我们用H5中的新特性LocalStorage来实现！

            主要需求：非登录状态添加购物车、登录后还持有非登录状态下的购物车信息。

    二：主要实现

        思路：

                在点击加入购物车是，将需要加入购物车的商品信息保存到LocalStorage中。包括商品的名称、价格以及添加时间等各类信息。

                并且购物车上面的显示商品个数的图标内容也随之改变。

                当登录账号后，进入个人购物车，购物车内商品信息从LocalStorage中获取，并插入到相关数据库表中。

                在完成之后，将本地LocalStorage内保存的信息清除掉。

 

    三:常见问题