微信小程序缓存历史访问城市数组

接到任务要做一个小程序缓存历史访问城市的功能,首先我的城市页面:


我定义的缓存:

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)输出出来我们的缓存数据进行查看


  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值