微信小程序--本地存储

本地存储分为异步和同步。

设置:

异步:wx.setStorage 

同步:wx.setStorageSync

获取:

异步:wx.getStorage

同步:wx.getStorageSync

移除:

异步:wx.removeStorage

同步:wx.removeStorageSync

清除所有:

异步:wx.clearStorage

同步:wx.clearStorageSync

这里给大家以同步为例,

先来说设置,wx.setStorageSync

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

微信小程序--本地存储_第1张图片
需要的参数

wx.setStorageSync('key','value')

微信小程序--本地存储_第2张图片
微信小程序--本地存储_第3张图片

获取数据: wx.getStorageSync 

微信小程序--本地存储_第4张图片
微信小程序--本地存储_第5张图片

移除数据: wx.removeStorageSync('key')

清除所有:wx.clearStorageSync()不需要参数


微信小程序--本地存储_第6张图片

接下来,我们说一下本地收藏功能怎么实现的呢

本地收藏功能

微信小程序--本地存储_第7张图片
列表页

这是一个列表渲染页面,每一个view点进去的详情页面其实是一个页面,只是传不同的id,来赋值不同的数据展示出来而已。

微信小程序--本地存储_第8张图片
列表页WXML
微信小程序--本地存储_第9张图片
列表页WXSS
微信小程序--本地存储_第10张图片
列表页JS

通过JS文件中带参数的跳转,把相应的数据传到详情页中,那接下来就是展示详情页

微信小程序--本地存储_第11张图片
详情页
微信小程序--本地存储_第12张图片
详情页WXML
微信小程序--本地存储_第13张图片
详情页WXSS
微信小程序--本地存储_第14张图片
详情页JS

你可能感兴趣的:(微信小程序--本地存储)