1. 程式人生 > >微信小程式之本地快取

微信小程式之本地快取

目前,微信給每個小程式提供了10M的本地快取空間(哎喲媽呀好大)

  1. 有了本地快取,你的小程式可以做到:
    • 離線應用(已測試在無網路的情況下,可以操作快取資料)
    • 流暢的使用者體驗
    • 減少網路請求,節省伺服器資源
  2. 哪些資料適合方快取:
    • 熱資料
    • 靜態資料(使用者資料,伺服器授權ID等)
    • 網路地址(圖片、檔案等網路地址)
    • 分頁列表資料及詳情內容
  3. 一般的快取系統採用鍵值對的方式完成資料插入和讀取,通過對key進行一次Hash演算法得到一個唯一值,並與value繫結起來;查詢的時候對根據Hash後的key查詢,演算法空間複雜度O(1);
  4. 小程式本地快取的實現基於上述方式實現。但是資料究竟是儲存在ROM,還是儲存在RAM後進行持久化,這個問題有待考究。
  5. 對本地快取資料操作分為同步和非同步兩種。同步方法有成功回撥函式,表示數 據處理成功後的操作。下面是小程式提供本地快取操作介面:
操作 非同步方法 同步方法
插入 wx.setStorage wx.setStorageSync
讀取 wx.getStorage wx.getStorageSync
刪除 wx.removeStorage wx.removeStorageSync
清空 wx.clearStorage wx.clearStorageSync
獲取快取資訊 wx.getStorageInfo wx.getStorageInfoSync

以Sync結尾都是同步方法。同步方法和非同步方法的區別是:

  • 同步方法會堵塞當前任務,直到同步方法處理返回。
  • 非同步方法不會塞當前任務。

6.下面以插入快取的兩個方法說明同步和非同步的區別:

  1. 先呼叫非同步方法,再呼叫同步方法
Page({
    save: function(e){
    console.log('開始儲存')
    wx.setStorage({
      key: 'key1',
      data: 'data1',
      success: function(res){
        console.log('非同步儲存成功')
      }
    })
    wx.setStorageSync('key2', 'data2')
    console.log('同步儲存成功')
  }
})

執行結果:

可以看出,同步方法比非同步方法先儲存成功,說明非同步方法沒有阻塞當前任務。

  1. 先呼叫同步方法,再呼叫非同步方法
Page({
    save: function(e){
    console.log('開始儲存')
    wx.setStorageSync('key2', 'data2')
    console.log('同步儲存成功')
    wx.setStorage({
      key: 'key1',
      data: 'data1',
      success: function(res){
        console.log('非同步儲存成功')
      }
    })
  }
})

執行結果:

可以看出,非同步方法只有等到同步方法執行成功才會執行。

快取API提供了一個獲取本地快取資訊的介面wx.getStorageInfo,有了它,開發者可以在已有api上再次封裝,比如加入快取時間、不覆蓋插入、批量刪除、判斷當前快取大小等。

最後一個是快取隔離級別的問題:

  1. 同一手機,不同小程式應用,至少在邏輯儲存上肯定不是共享快取,滿足應用級別隔離。
  2. 同一手機,同一個小程式,不同微信使用者掃碼使用,經測試,也不共享快取,目前測試條件下,是使用者級別隔離。
  3. 同一手機,同一個小程式,同一微信使用者兩次掃碼使用,經測試,是共享快取。
  4. 同一手機,同一個小程式,不同微信使用者切換使用(分別掃碼兩次),經測試,同一個使用者共享快取,不同使用者間不共享快取。

目前可以推斷在真機除錯條件下,每個小程式掃碼使用者都會分配10M的本地快取。
以上是個人在真機測試得到的結果,結果不一定完全準確,僅供參考。

 

補充:

下面從多個方面來談談wx.getStorageInfo(OBJECT),非同步獲取當前storage的相關資訊

OBJECT引數說明:

引數 型別 必填 說明
success Function 介面呼叫的回撥函式,詳見返回引數說明
fail Function 介面呼叫失敗的回撥函式
complete Function 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行)

success返回引數說明:

引數 型別 說明
keys String Array 當前storage中所有的key
currentSize Number 當前佔用的空間大小, 單位kb
limitSize Number 限制的空間大小,單位kb

示例程式碼:

wx.getStorageInfo({
  success: function(res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  }
})