微信小程序 緩存(本地緩存、異步緩存、同步緩存)詳解
微信小程序 緩存
關(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的緩存
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法
- 詳解將微信小程序接口Promise化并使用async函數(shù)
- 詳解微信小程序 同步異步解決辦法
- 微信小程序異步處理詳解
- 微信小程序 wx.request方法的異步封裝實(shí)例詳解
- 微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?
- 微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法
- 微信小程序之支付后調(diào)用SDK的異步通知及驗(yàn)證處理訂單方法
- 微信小程序中使用Promise進(jìn)行異步流程處理的實(shí)例詳解
- 微信小程序 es6-promise.js封裝請(qǐng)求與處理異步進(jìn)程
- 微信小程序利用co處理異步流程的方法教程
- 微信小程序中使用 async/await的方法實(shí)例分析
相關(guān)文章
javascript條件式訪問(wèn)屬性和箭頭函數(shù)介紹
這篇文章主要介紹了javascript條件式訪問(wèn)屬性和箭頭函數(shù),下面文章圍繞條件式訪問(wèn)屬性和箭頭函數(shù)的相關(guān)資料展開(kāi)文章內(nèi)容,需要的朋友可以參考一下2021-11-11javascript數(shù)據(jù)類型之原始類型詳解
這篇文章主要為大家介紹了javascript數(shù)據(jù)類型之原始類型詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06JavaScript前端迭代器Iterator與生成器Generator講解
這篇文章主要為大家介紹了JavaScript前端迭代器Iterator與生成器Generator講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09JS中的every()對(duì)空數(shù)組總返回true原理分析
這篇文章主要為大家介紹了JS中的every()對(duì)空數(shù)組總返回true原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09