微信小程序加入购物车方法更新?

微信小程序的购物车功能

在商品列表页

index.wxml

中，给下单按钮绑定一个添加购物车的事件

addCart

，使用

catchtap

是不会冒泡，同时传入

data-item

，当前的商品，代码如下所示：

1

<view class="order" catchtap="addCart" data-item="{{ item }}">下单</view>

在

index.js

中，在

Page

中，定义

addCart

事件。对此，可以分析一下当点击按钮以后添加购物车的逻辑：

拿到点击要添加入到购物车的商品

判断该商品在不在购物车里面

如果不在, 把该商品添加到购物车里面, 并且新加一个字段

num = 1

如果在，修改改商品的

num

值 累加

在

addCart

中，第一步拿到该商品，通过

e.currentTarget.dataset

获取。第二步，判断该商品在不在购物车里面，根据

_id

尝试从购物车里面获取数据，看能不能获取的到。使用

try...catch

，在有值的情况下，把购物车里面的该商品的

num

值累加

，并且进行下单成功的提示；在没有值，把商品添加到购物车里面，并且进行下单成功的提示，最后调用

setTabBar()

方法修改底部购物车

微信小程序的编写中，涉及到有些业务场景需要将数据缓存到本地，则微信小程序api提供了两个接口函数，

wx.setStorage可以将数据缓存在本地指定的key中，如果本地缓存已经存在指定的key，则会覆盖该key对应的内容，这是一个异步的接口，在调用时会涉及到成功，失败，完成三个状态，

与wx.setStorage唯一不同的就是wx.setStorageSync是同步进行的，所以不会涉及到成功，失败，完成等回调，但是在使用时需要使用try.......catch....来捕获异常；

现在编写一个将字符串缓存本地的例子

编译项目，点击缓存按钮：

现在改变缓存的内容，但是缓存的key保持不变

可以看到第二次的内容把第一次覆盖了。

将内容缓存到本地之后，将其从本地提取展示出来，则可是使用微信小程序api提供的两个接口：wx.getStorageInfo(Object object)，wx.getStorageSync(string key)，与缓存同样，读取缓存也分同步和异步；

我们将刚刚存储到本地的数据展示到页面上：

编译项目，点击按钮获取缓存数据并将其展示到页面上。

完成了本地数据的缓存，获取，则接下来就是关于缓存数据的清除，同样微信小程序api也提供了可使用的接口，

至此微信小程序本地保存数据就此结束！

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorag（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。 

注意： 

localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。

wx.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

代码示例

wx.setStorage({ key:"key" data:"value" })1234

wx.setStorageSync(KEY,DATA) 

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try { wx.setStorageSync('key', 'value') } catch (e) { }1234

wx.getStorageInfo(OBJECT) 

异步获取当前storage的相关信息

wx.getStorageInfo({ success: function(res) { console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) } })1234567

wx.getStorageInfoSync 

同步获取当前storage的相关信息

try { var res = wx.getStorageInfoSync() console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) } catch (e) { // Do something when catch error }12345678

wx.removeStorage(OBJECT) 

从本地缓存中异步移除指定 key 。

wx.removeStorage({ key: 'key', success: function(res) { console.log(res.data) } })123456

wx.removeStorageSync(KEY)

从本地缓存中同步移除指定 key 。 try { wx.removeStorageSync('key') } catch (e) { // Do something when catch error }123456

wx.clearStorage() 

清理本地数据缓存。

wx.clearStorage()1

wx.clearStorageSync() 

同步清理本地数据缓存

try { wx.clearStorageSync() } catch(e) { // Do something when catch error }

---