這篇文章主要介紹了微信小程式快取（本地快取、非同步快取、同步快取）詳解的相關資料,需要的朋友可以參考下
微信小程式快取
關於本機快取
1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorage
##）
##可以對本機快取進行設定、取得和清理。本機快取最大為10MB
2.localStorage 是永久儲存
一、非同步快取
wx. setStorage(OBJECT)
將資料儲存在本機快取中指定的key 中，會覆寫原來該key 對應的內容
wx.setStorage({
key:"key",
data:"value"
})登入後複製
wx.getStorage(OBJECT)
從本機快取中非同步取得指定key 對應的內容。
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})登入後複製
wx.getStorageInfo(OBJECT)
非同步取得目前storage的相關資訊
wx.getStorageInfo({
success: function(res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})登入後複製
wx.removeStorage(OBJECT)
#從本機快取中非同步移除指定key 。
wx.removeStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})登入後複製
二、同步快取
wx.setStorageSync(KEY,DATA)
將data 儲存在本機快取中指定的key 中，會覆寫原來該key 對應的內容，這是一個同步介面。
wx.getStorageSync(KEY)
#從本機快取中同步取得指定 key 對應的內容。
wx.getStorageInfoSync
同步取得目前storage的相關資訊
wx.removeStorageSync(KEY)
#從本機快取中同步移除指定key 。
三、清理快取wx.clearStorage()
清理本機資料快取。
wx.clearStorageSync()
同步清理本機資料快取
關於同步快取和非同步快取的差異
以Sync（同步，同時）結尾的都是同步緩存，二者的差異是，非同步不會阻塞目前任務，同步快取直到同步方法處理完才能繼續往下執行。
但是一般情況下不要用清除所有的緩存，如果想要清除對應的緩存，設定對應的快取內容為空數組就好
關於歷史搜尋
<input type="text" class="search-icon" placeholder="请输入要搜索的内容" bindinput="searchNameInput"/>
<text bindtap="setSearchStorage">搜索</text>
<view>
<view>
<text style="float:left;" bindtap="deleteHistory">历史搜索</text>
<text style="float:right;" bindtap="deleteHistory">删除搜索历史</text>
</view>
<view>
<view class="search-list" wx:for="{{searchData}}" wx:key="item">
<view>{{item == null?'暂无数据':item}}</view>
</view>
</view>
</view>登入後複製
頁面
#這裡有三個綁定事件
bindinput=" searchNameInput" 取得使用者輸入的資料
bindtap="setSearchStorage" 設定本機儲存
bindtap="deleteHistory" 刪除歷史搜尋
//获取用户输入框的值
searchNameInput:function(e){
var that = this;
that.setData({
inputValue:e.detail.value
})
}
e.detail.value就代表了当前输入值登入後複製
點擊搜尋的時候，bindtap="setSearchStorage"
##
//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
setSearchStorage:function(){
var that = this
if(this.data.inputValue != ''){
//调用API向本地缓存存入数据
var searchData = wx.getStorageSync('searchData') || []
searchData.push(this.data.inputValue)
wx.setStorageSync('searchData', searchData)
//读取用户搜索商品
var name = this.data.inputValue
wx.request({
url: 'www.shop.com/home/product/search',
data: {name:name},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})
}
}登入後複製
# 流程這麼走：
1.用戶輸入數據，點擊搜尋
2.如果數據不為空，加入（設定）本地快取3.去伺服器搜尋用戶想要的數據，賦值給這個頁面的變數
4.點選刪除，去除本機這個key的value
這裡的快取形式的 key=>value
#var searchData = wx.getStorageSync('searchData') || []
取得本機名字為'searchData'的緩存，如果'searchData'這個快取不存在就相當於重新什麼一個空數組，賦值給searchData這個變數
searchData.push(this.data.inputValue)
將使用者輸入的值PUSH進searchData這個變數裡
wx.setStorageSync('searchData', searchData)
#呼叫API接口，重新設定key = 'searchData'的這個快取的value等於searchData
下面的wx.request是請求資料的內容，說膩了，印象夠深了。 這裡沒有綁定取得快取的bindtap，只要取得到，然後加入到Page裡面的data
//从本地获取历史搜索数据
var searchData = wx.getStorageSync('searchData')||[]
this.setData({
searchData:searchData
})
deleteHistory
//删除历史搜索数据
deleteHistory:function(){
var that = this
wx.showModal({
title: '提示',
content: '是否删除历史搜索',
success: function(res) {
if (res.confirm) {
wx.setStorageSync('searchData', []);
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
}登入後複製
這裡是將'searchData '這個key的快取的value為空數組，而不是使用API提供的wx.clearStorageSync，這個會清除其他的所有緩存，而我只是想清除這一個key的緩存
以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關推薦：
###微信小程序
彈出視窗自訂的程式碼############微信小程式的訊息提示方塊的實作###################### ####
以上是微信小程式中快取的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
