微信小程序API---数据缓存

本地数据缓存常用于存储多页面用到的数据,例如用户头像信息、

(1)数据存储

wx.setStorage(Object object)与wx.setStorageSync(string key, any data)

wx.setStorage({
key:"key",
data:"value"
}) 同步语法:
try {
wx.setStorageSync('key', 'value')
} catch (e) {
...
}

日常开发里为了数据的正确执行获取,一般使用wx.setStorageSync,即wx.setStorage 的同步版本,进行数据存储。详情参见微信小程序---存储本地缓存数据

【拓展】关于同步缓存和异步缓存的区别
    以Sync(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
    通俗点说,异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.
    使用异步,性能会更好;而使用同步,数据会更安全。

Synchronize同步

(2)获取指定 key 的内容

wx.getStorage(Object object)与wx.getStorageSync(string key)

wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})

同步语法:
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}

其他页面获取数据

<view class="showUserArea">
<image src="{{userInfo.avatarUrl}}"></image>
<text>{{userInfo.nickName}}</text>
</view> /* 用户展示区域 */
.showUserArea{
width: %;
height: 400rpx;
background:#388bff;
display: flex;
flex-direction: column;
align-items:center;/*垂直居中*/
justify-content: center;/*水平居中*/
}
.showUserArea>image{
width: 128rpx;
height: 128rpx;
border-radius: %;
} onShow(){
var res = wx.getStorageSync('userInfo');//获取缓存用户数据
try {
if (res) {
this.setData({
userInfo: res
}) }
} catch (e) {
// Do something when catch error }
}

微信小程序API---数据缓存

遗留问题:真机测试获取失败。。。。。。。。。

(3)获取当前storage的相关信息

wx.getStorageInfo(Object object)与Object wx.getStorageInfoSync()

wx.getStorageInfo({
success (res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
}) 同步版本:
try {
const res = wx.getStorageInfoSync()
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
} catch (e) {
// Do something when catch error
}

(4)本地缓存中移除指定 key

wx.removeStorage(Object object)与wx.getStorageSync(string key)

wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
}) 同步版本:
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}

(5)清理本地数据缓存

wx.clearStorage(Object object)与wx.clearStorageSync()

wx.clearStorage()

同步版本:
try {
wx.clearStorageSync()
} catch(e) {
// Do something when catch error
}

.

上一篇:微信小程序之数据缓存


下一篇:腾讯云服务器搭建Apache/PHP/MySQL环境