微信小程式如何快取獲取資料？

每個微信小程式都可以有自己的本機緩存，可以透過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 ==\&#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: \'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 值的問題了

推薦： 《小程式開發教學》

以上是微信小程式如何快取獲取資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！