這篇文章主要介紹了微信小程序緩存獲取數(shù)據(jù)的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專(zhuān)注于遼源企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城開(kāi)發(fā)。遼源網(wǎng)站建設(shè)公司,為遼源等地區(qū)提供建站服務(wù)。全流程按需規(guī)劃網(wǎng)站，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

每個(gè)微信小程序都可以有自己的本地緩存，可以通過(guò) wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以對(duì)本地緩存進(jìn)行設(shè)置、獲取和清理。同一個(gè)微信用戶，同一個(gè)小程序 storage 上限為 10MB 。localStorage 以用戶維度隔離，同一臺(tái)設(shè)備上，A 用戶無(wú)法讀取到 B 用戶的數(shù)據(jù)。

數(shù)據(jù)常用于哪里？

對(duì)于數(shù)據(jù)需求較小的歷史記錄、購(gòu)物車(chē)事件等都可以使用 storage 進(jìn)行緩存， Storage 將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中，如果重復(fù)會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容 可以參照微信小程序開(kāi)發(fā)手冊(cè)中的Storage

如何使用異步接口進(jìn)行數(shù)據(jù)緩存？

將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的key中，會(huì)覆蓋掉原來(lái)該key對(duì)應(yīng)的內(nèi)容，這是一個(gè)異步接口。

OBJECT參數(shù)說(shuō)明：

示例代碼

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

當(dāng) setStorage 之后可以去到開(kāi)發(fā)者工具里面查看 這是沒(méi)有保存值的情況

可以看到是沒(méi)有 key 值的 那么當(dāng)我們?nèi)ミM(jìn)行輸入搜索

最后再去 storage 中查看

獲取到了一個(gè) key 為 history 的 Array 數(shù)組 那么再去看看storage

得到了一個(gè)數(shù)組而且沒(méi)有被覆蓋，那么怎么實(shí)現(xiàn)的呢？ 先來(lái)看看js代碼

search.js

設(shè)置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\')
      }
    });
},

進(jìn)行搜索和緩存數(shù)據(jù)到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: \'請(qǐng)輸入要搜索信息\',
    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: \'暫無(wú)此信息\',
    icon:none,
    duration: 1000
    
  });
  this.setData({
    inputsearch:\'\'
  })
  }else if(temp){
    wx.navigateTo({
      url:\'../about/about\'
    })
    this.setData({
      inputsearch:\'\'
    })
  }
 }
},

將 storage 中的 key 值設(shè)為 hisotry

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

定義一個(gè)數(shù)組 history 空數(shù)組去獲取 storage 中的值,首先是去查詢有沒(méi)有該 key 值，如果沒(méi)有則 fail ，那么 history 依然為空數(shù)組

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

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

這里有個(gè)誤區(qū)可能你會(huì)將輸入的值inputsearch push到一個(gè)新的空數(shù)組，然后再將這個(gè)新數(shù)組push到history數(shù)組中，但這個(gè)方法顯然不可行，你添加之后新數(shù)組將會(huì)存放在history數(shù)組的第一個(gè)下標(biāo)的數(shù)組下，對(duì)于history數(shù)組也就只有兩個(gè)值

好了，回到我要說(shuō)的，那么如何將 inputsearch 添加到 history 中呢,可以使用 unshift 方法或者 push 方法，這里應(yīng)該使用 unshift 應(yīng)該將每個(gè)新增值存放在 history 的第一個(gè)位置，這是其實(shí)就是一個(gè)用戶體驗(yàn)問(wèn)題了

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);
      },
})

好了，這樣就不會(huì)出現(xiàn)“覆蓋掉”原來(lái)的 key 值的問(wèn)題了

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享微信小程序緩存獲取數(shù)據(jù)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

分享名稱：微信小程序緩存獲取數(shù)據(jù)的方法-創(chuàng)新互聯(lián)
路徑分享：http://chinadenli.net/article4/dhihoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、網(wǎng)站建設(shè)、面包屑導(dǎo)航、電子商務(wù)、全網(wǎng)營(yíng)銷(xiāo)推廣、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)