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

示例代码

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

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

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

search.js

设置data

data: {
    status:false,
    inputsearch:\&＃39;\&＃39;,
    job:[],
    history:[],
},

首先去获取storage中的值

  onLoad: function (options) {
    var that =this;
    wx.getStorage({
    key: \&＃39;history\&＃39;,
    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+\&＃39;aaaaa\&＃39;)
      }
    });
},

进行搜索和缓存数据到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 == \&＃39;\&＃39;){
 
wx.showToast({
    title: \&＃39;请输入要搜索信息\&＃39;,
    icon:none,
    duration: 1000
  });
 return false;
}else{
   this.data.history.unshift(sear);
wx.setStorage({
  key: \&＃39;history\&＃39;,
  data: that.data.history,
  success: function(res){
    that.setData({
      history:that.data.history,
      status:true
    })
    console.log(res.data);
  },
})
  for(let i =0;i
    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 ==\&＃39;\&＃39;){
     wx.showToast({
    title: \&＃39;暂无此信息\&＃39;,
    icon:none,
    duration: 1000
    
  });
  this.setData({
    inputsearch:\&＃39;\&＃39;
  })
  }else if(temp){
    wx.navigateTo({
      url:\&＃39;../about/about\&＃39;
    })
    this.setData({
      inputsearch:\&＃39;\&＃39;
    })
  }
 }
},

将 storage 中的 key 值设为 hisotry

wx.setStorage({
  key: \&＃39;history\&＃39;,
  data: that.data.history,
)}

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

wx.setStorage({
  key: \&＃39;history\&＃39;,
  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: \&＃39;history\&＃39;,
    data: that.data.history,
      success: function(res){
        that.setData({
          history:that.data.history,
          status:true
        })
        console.log(res.data);
      },
})

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

推荐：《小程序开发教程》

以上就是微信小程序如何缓存获取数据？的详细内容，更多请关注其它相关文章！