您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“微信小程序中怎么進(jìn)行緩存”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“微信小程序中怎么進(jìn)行緩存”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
微信小程序 緩存
關(guān)于本地緩存
1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)
可以對(duì)本地緩存進(jìn)行設(shè)置、獲取和清理。本地緩存最大為10MB
2.localStorage 是永久存儲(chǔ)
一、異步緩存
wx.setStorage(OBJECT)
將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中,會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容
wx.setStorage({ key:"key", data:"value" })
wx.getStorage(OBJECT)
從本地緩存中異步獲取指定 key 對(duì)應(yīng)的內(nèi)容。
wx.getStorage({ key: 'key', success: function(res) { console.log(res.data) } })
wx.getStorageInfo(OBJECT)
異步獲取當(dāng)前storage的相關(guān)信息
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 存儲(chǔ)在本地緩存中指定的 key 中,會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容,這是一個(gè)同步接口。
wx.getStorageSync(KEY)
從本地緩存中同步獲取指定 key 對(duì)應(yīng)的內(nèi)容。
wx.getStorageInfoSync
同步獲取當(dāng)前storage的相關(guān)信息
wx.removeStorageSync(KEY)
從本地緩存中同步移除指定 key 。
三、清理緩存
wx.clearStorage()
清理本地?cái)?shù)據(jù)緩存。
wx.clearStorageSync()
同步清理本地?cái)?shù)據(jù)緩存
關(guān)于同步緩存和異步緩存的區(qū)別
以Sync(同步,同時(shí))結(jié)尾的都是都是同步緩存,二者的區(qū)別是,異步不會(huì)阻塞當(dāng)前任務(wù),同步緩存直到同步方法處理完才能繼續(xù)往下執(zhí)行。
但是一般情況下不要用清除所有的緩存,如果想要清除相應(yīng)的緩存,設(shè)置對(duì)應(yīng)的緩存內(nèi)容為空數(shù)組就好
關(guān)于歷史搜索
<input type="text" class="search-icon" placeholder="請(qǐng)輸入要搜索的內(nèi)容" 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?'暫無(wú)數(shù)據(jù)':item}}</view> </view> </view> </view>
頁(yè)面
這里有三個(gè)綁定事件
bindinput="searchNameInput" 獲取用戶輸入的數(shù)據(jù)
bindtap="setSearchStorage" 設(shè)置本地存儲(chǔ)
bindtap="deleteHistory" 刪除歷史搜索
//獲取用戶輸入框的值 searchNameInput:function(e){ var that = this; that.setData({ inputValue:e.detail.value }) } e.detail.value就代表了當(dāng)前輸入值
當(dāng)點(diǎn)擊搜索的時(shí)候,bindtap="setSearchStorage"
//將用戶輸入的內(nèi)容存入本地緩存,并且將搜索數(shù)據(jù)放到首頁(yè) setSearchStorage:function(){ var that = this if(this.data.inputValue != ''){ //調(diào)用API向本地緩存存入數(shù)據(jù) 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.用戶輸入數(shù)據(jù),點(diǎn)擊搜索
2.如果數(shù)據(jù)不為空,加入(設(shè)置)本地緩存
3.去服務(wù)器搜索用戶想要的數(shù)據(jù),賦值給這個(gè)頁(yè)面的變量
4.點(diǎn)擊刪除,去除本地這個(gè)key的value
這里的緩存形式的 key=>value
var searchData = wx.getStorageSync('searchData') || []
獲取本地名字為'searchData'的緩存,如果'searchData'這個(gè)緩存不存在就相當(dāng)于重新什么一個(gè)空數(shù)組,賦值給searchData這個(gè)變量
searchData.push(this.data.inputValue)
將用戶輸入的值PUSH進(jìn)searchData這個(gè)變量里
wx.setStorageSync('searchData', searchData)
調(diào)用API接口,重新設(shè)置key = 'searchData'的這個(gè)緩存的value等于searchData
下面的wx.request是請(qǐng)求數(shù)據(jù)的內(nèi)容,說(shuō)膩了,印象夠深了。
這里沒(méi)有綁定獲取緩存的bindtap,只要獲取到,然后添加到Page里面的data
//從本地獲取歷史搜索數(shù)據(jù) var searchData = wx.getStorageSync('searchData')||[] this.setData({ searchData:searchData }) deleteHistory //刪除歷史搜索數(shù)據(jù) 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'這個(gè)key的緩存的value為空數(shù)組,而不是使用API提供的wx.clearStorageSync,這個(gè)會(huì)清除其他的所有緩存,而我只是想清除這一個(gè)key的緩存
讀到這里,這篇“微信小程序中怎么進(jìn)行緩存”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。