微信小程序如何缓存获取数据?

微信小程序如何缓存获取数据?

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB 。localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。

数据常用于哪里?

对于数据需求较小的历史记录、购物车事件等都可以使用 storage 进行缓存, Storage 将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容 可以参照微信小程序开发手册中的Storage

如何使用异步接口进行数据缓存?

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

OBJECT参数说明:

微信小程序如何缓存获取数据?

示例代码

wx.setStorage({ key:key,
    data:value })

当 setStorage 之后可以去到开发者工具里面查看 这是没有保存值的情况

微信小程序如何缓存获取数据?

可以看到是没有 key 值的 那么当我们去进行输入搜索

最后再去 storage 中查看

微信小程序如何缓存获取数据?

获取到了一个 key 为 history 的 Array 数组 那么再去看看storage

微信小程序如何缓存获取数据?

得到了一个数组而且没有被覆盖,那么怎么实现的呢? 先来看看js代码

search.js

设置data

data: {
    status:false,
    inputsearch:\'\',
    job:[],
    history:[],
},

首先去获取storage中的值

  onLoad: function (options) {
    var that =this;
    wx.getStorage({
    key: \'history\',
    success: function(res){
        that.setData({
          history:res.data,
        })
        if(that.data.history.length==0){
          that.setData({
            status:false
          });
        }else{
          that.setData({
            status:true
          })
         }
      },
      fail: function(res) {
        console.log(res+\'aaaaa\')
      }
    });
},

进行搜索和缓存数据到storage中

search:function(e){
var that =this;
var sear =this.data.inputsearch;
var jobs=this.data.job;
var input = new RegExp(sear);
var temp = [];
if(sear == \'\'){
 
wx.showToast({
    title: \'请输入要搜索信息\',
    icon:none,
    duration: 1000
  });
 return false;
}else{
   this.data.history.unshift(sear);
wx.setStorage({
  key: \'history\',
  data: that.data.history,
  success: function(res){
    that.setData({
      history:that.data.history,
      status:true
    })
    console.log(res.data);
  },
})
  for(let i =0;i<jobs.length;i++){< span="" style="margin: 0px; padding: 0px;">
    if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address)){
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }
  } 
  if(temp ==\'\'){
     wx.showToast({
    title: \'暂无此信息\',
    icon:none,
    duration: 1000
    
  });
  this.setData({
    inputsearch:\'\'
  })
  }else if(temp){
    wx.navigateTo({
      url:\'../about/about\'
    })
    this.setData({
      inputsearch:\'\'
    })
  }
 }
},

将 storage 中的 key 值设为 hisotry

wx.setStorage({
  key: \'history\',
  data: that.data.history,
)}

定义一个数组 history 空数组去获取 storage 中的值,首先是去查询有没有该 key 值,如果没有则 fail ,那么 history 依然为空数组

wx.setStorage({
  key: \'history\',
  data: that.data.history,
  success: function(res){
    that.setData({
      history:that.data.history,
      status:true
    })
  },
})

返回得到 history 之后再去将 inputsearch 的值添加到 history 中

这里有个误区可能你会将输入的值inputsearch push到一个新的空数组,然后再将这个新数组push到history数组中,但这个方法显然不可行,你添加之后新数组将会存放在history数组的第一个下标的数组下,对于history数组也就只有两个值

好了,回到我要说的,那么如何将 inputsearch 添加到 history 中呢,可以使用 unshift 方法或者 push 方法,这里应该使用 unshift 应该将每个新增值存放在 history 的第一个位置,这是其实就是一个用户体验问题了

var that =this;
var sear =this.data.inputsearch;
this.data.history.unshift(sear);
wx.setStorage({
    key: \'history\',
    data: that.data.history,
      success: function(res){
        that.setData({
          history:that.data.history,
          status:true
        })
        console.log(res.data);
      },
})

好了,这样就不会出现“覆盖掉”原来的 key 值的问题了

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 微信小程序如何缓存获取数据? https://www.liyege.cn/wxxcxrhhchqsj.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章