微信小程式之本地快取
阿新 • • 發佈:2018-12-05
目前,微信給每個小程式提供了10M的本地快取空間(哎喲媽呀好大)
- 有了本地快取,你的小程式可以做到:
- 離線應用(已測試在無網路的情況下,可以操作快取資料)
- 流暢的使用者體驗
- 減少網路請求,節省伺服器資源
- 哪些資料適合方快取:
- 熱資料
- 靜態資料(使用者資料,伺服器授權ID等)
- 網路地址(圖片、檔案等網路地址)
- 分頁列表資料及詳情內容
- 一般的快取系統採用鍵值對的方式完成資料插入和讀取,通過對key進行一次Hash演算法得到一個唯一值,並與value繫結起來;查詢的時候對根據Hash後的key查詢,演算法空間複雜度O(1);
- 小程式本地快取的實現基於上述方式實現。但是資料究竟是儲存在ROM,還是儲存在RAM後進行持久化,這個問題有待考究。
- 對本地快取資料操作分為同步和非同步兩種。同步方法有成功回撥函式,表示數 據處理成功後的操作。下面是小程式提供本地快取操作介面:
操作 | 非同步方法 | 同步方法 |
---|---|---|
插入 | wx.setStorage | wx.setStorageSync |
讀取 | wx.getStorage | wx.getStorageSync |
刪除 | wx.removeStorage | wx.removeStorageSync |
清空 | wx.clearStorage | wx.clearStorageSync |
獲取快取資訊 | wx.getStorageInfo | wx.getStorageInfoSync |
以Sync結尾都是同步方法。同步方法和非同步方法的區別是:
- 同步方法會堵塞當前任務,直到同步方法處理返回。
- 非同步方法不會塞當前任務。
6.下面以插入快取的兩個方法說明同步和非同步的區別:
- 先呼叫非同步方法,再呼叫同步方法
Page({
save: function(e){
console.log('開始儲存')
wx.setStorage({
key: 'key1',
data: 'data1',
success: function(res){
console.log('非同步儲存成功')
}
})
wx.setStorageSync('key2', 'data2')
console.log('同步儲存成功')
}
})
執行結果:
可以看出,同步方法比非同步方法先儲存成功,說明非同步方法沒有阻塞當前任務。
- 先呼叫同步方法,再呼叫非同步方法
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上再次封裝,比如加入快取時間、不覆蓋插入、批量刪除、判斷當前快取大小等。
最後一個是快取隔離級別的問題:
- 同一手機,不同小程式應用,至少在邏輯儲存上肯定不是共享快取,滿足應用級別隔離。
- 同一手機,同一個小程式,不同微信使用者掃碼使用,經測試,也不共享快取,目前測試條件下,是使用者級別隔離。
- 同一手機,同一個小程式,同一微信使用者兩次掃碼使用,經測試,是共享快取。
- 同一手機,同一個小程式,不同微信使用者切換使用(分別掃碼兩次),經測試,同一個使用者共享快取,不同使用者間不共享快取。
目前可以推斷在真機除錯條件下,每個小程式掃碼使用者都會分配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)
}
})