微信小程序 緩存
關于本地緩存
1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）
可以對本地緩存進行設置、獲取和清理。本地緩存最大為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的緩存
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
