一、缓存介绍
每个微信小程序都有自己的本地缓存。同一个微信用户,同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。
可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。
二、 (异步)和(同步)的区别:
wx.setStorage(object)是一个异步接口,参数object包含key和data(需要存储的内容),他有3个回调函数:success(接口调用成功的回调函数)、fail(接口调用失败的回调函数)、complete(接口调用结束的回调函数,调用成功、失败都会执行)。我们可以通过3个回调函数进一步优化一功能。
wx.setStorageSync(key,data)是一个同步接口,需要接受key和data(String/Object)2个参数,他没有上述三个回调函数。
在开发中根据业务和环境选取需要的方法,一般都使用同步,异步是为了用户体验的情况而选择,同步相对简单。
三、在哪个生命周期可以调用缓存:
页面的onShow生命周期基本在每次打开页面都会触发,所以在onShow里调用更保险,当然了,如果熟悉路由切换到下一个页面时触发哪个生命周期,也可以在onLoad里面调用,提升用户体验。
四、案例展示
问题描述:我要一次性把【用户名、密码、所属机构】等存储到本地缓存中,怎么做?在使用过程中,如果要在新增一个【所在部门】,应该如何操作?
//定义一个对象来存储用户信息
let userArr = {
name: 'Jerry',
pass: '123123',
compy: 'boc'
}
//对象中增加新的键值对,直接写
userArr.bumen = '营业部'
//写入缓存
wx.setStorage({
key: 'userInfo',
data: userArr
})
//读取缓存
wx.getStorage({
key: 'userInfo'
}).then(res => {
console.log('res===', res)
})
输出结果:
res=== {errMsg: "getStorage:ok", data: {…}}
data:
age: "12"
compy: "boc"
name: "Jerry"
pass: "123123"
__proto__: Object
errMsg: "getStorage:ok"