接到任务要做一个小程序缓存历史访问城市的功能,首先我的城市页面:
我定义的缓存:
wx.setStorage({
key:
'historyCitys',
data: historyCitys,
//这是一个数组,存有所有访问过的城市的名称
})
首先在页面onLoad时,通过下列代码获取系统中历史访问城市的缓存
wx.getStorage({
key:
'historyCitys',
})
当前我的缓存中只有“北京市”这一个城市,当我们点击这个界面上任何一个城市后会将该城市添加进historyCitys这个数组,并通过上面的setStorage代码缓存,具体代码:
wx.getStorage({ //获取历史访问城市缓存
key: 'historyCitys',
//当获取缓存成功时调用success函数
success: function (res) { //在此可通过console.log(res.data)打印出已缓存了的historyCitys数组
that.setData({
historyCitys: res.data //把原缓存数组赋值给另一个数组变量,一会会对这个数组变量进行处理,并缓存
})
var historyCitys = that.data.historyCitys
var city = that.data.city //你要缓存的城市名称,还有一个给它赋值的过程,在次不再赘述
//在我们有了要缓存的城市名称后还要判断原来缓存的数组中有没有这个城市,
//如果有了那就不能再缓存了
var flage=true
for (let i in historyCitys) {
if (historyCitys[i] == city) { //如果数组中有该城市,flage变为false
flage=false
}
}
//如果通过上面的循环检测,flage依然是true,那么则说明原缓存数组中没有这个城市,我们就可以将其缓存起来
if (flage) {
historyCitys.push(city) //把这个城市添加进要缓存的数组中
}
//缓存这个新的数组
wx.setStorage({
key: 'historyCitys',
data: historyCitys,
})
},
//当获取缓存失败时调用fail函数(因为在我们第一次查询historyCitys的缓存时,
//由于我们还从来没有缓存过该数据,所以是获取不到的,那么就会触发fail函数)
fail: function (res) { //这里通过console.log(res.data)打印出的应该是undefined
historyCitys.push(city) //此时缓存数组是个空值,不必担心会有重复的城市,直接将要缓存的城市添加进要缓存的数组中即可
wx.setStorage({
key: 'historyCitys',
data: historyCitys,
})
}
})
这样我们就缓存了一个新的城市,再次打开这个页面可以通过console.log(res.data)输出出来我们的缓存数据进行查看