微信小程序,缓存,微信小程序,缓存详解,微信小程序,缓存有哪些微信小程序 缓存 关于本地缓存 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的缓存 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
微信小程序,缓存,微信小程序,缓存详解,微信小程序,缓存有哪些
|
