微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
微信小程序 缓存
关于本地缓存
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的缓存
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!