淺談微信小程式用setStorage和getStorage快取和獲取資料

以夢為馬i發表於2019-03-04
微信小程式快取

快取資料

每個微信小程式都可以有自己的本地快取，可以通過 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引數說明：

引數 型別 必填 說明
key String 是 本地快取中的指定的
data Object/String 是 需要儲存的內容
success Function 否 介面呼叫成功的回撥函式
fail Function 否 介面呼叫失敗的回撥函式
complete Function 否 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

示例程式碼

wx.setStorage({
    key:"key",
    data:"value"
})
複製程式碼

當setStorage之後可以去到開發者工具裡面檢視
這是沒有儲存值的情況

淺談微信小程式用setStorage和getStorage快取和獲取資料

可以看到是沒有key值的
那麼當我們去進行輸入搜尋

淺談微信小程式用setStorage和getStorage快取和獲取資料

最後再去storage中檢視

淺談微信小程式用setStorage和getStorage快取和獲取資料

獲取到了一個key為history的Array陣列
那麼再去進行搜尋

淺談微信小程式用setStorage和getStorage快取和獲取資料

再看看storage

淺談微信小程式用setStorage和getStorage快取和獲取資料

得到了一個陣列而且沒有被覆蓋，那麼怎麼實現的呢？
先來看看程式碼

search.wxml

 <view class="search-top-input">
      <input type="text" placeholder="搜尋公司/職位" auto-focus="true" value="{{inputsearch}}" 
      bindconfirm="search"
      bindinput="inputSearchTap"
      data-index="{{index}}"/>
 </view>
 
 <view class="search-history" wx:if="{{status}}">
        <view class="search-history-title">
              <text>歷史搜尋</text>
              <image src="../../images/delete.png" bindtap="deleteHistory"></image>
        </view>
        <view class="search-history-detail" >
              <view class="history-detail" wx:for="{{history}}" wx:key="{{item}}" bindtap="historySearch" data-index="{{index}}">
                    <text class="detail" >{{item}}</text>
              </view>
        </view>
 </view>
 
 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++){
    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值的問題了,是不是美滋滋

當然還有setStorageSync同步介面的問題

詳情點選這裡

這裡是專案地址

檢視點選這裡

如果你覺得對你有所幫助

那麼給我的github專案一個Star吧

訪問點選這裡

謝謝

淺談微信小程式用setStorage和getStorage快取和獲取資料

相關文章