微信小程序中缓存的解析

这篇文章主要介绍了微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解的相关资料,需要的朋友可以参考下

微信小程序 缓存

关于本地缓存

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: #39;key #39;,
 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: #39;key #39;,
 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 >
 页面
这里有三个绑定事件
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 != #39; #39;){
 //调用API向本地缓存存入数据
 var searchData = wx.getStorageSync( #39;searchData #39;) || [] 
 searchData.push(this.data.inputValue) 
 wx.setStorageSync( #39;searchData #39;, searchData)
 //读取用户搜索商品
 var name = this.data.inputValue
 wx.request({
 url: #39;www.shop.com/home/product/search #39;,
 data: {name:name},
 method: #39;GET #39;, 
 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( #39;searchData #39;)||[]
 this.setData({
 searchData:searchData
}
这里是将'searchData'这个key的缓存的value为空数组，而不是使用API提供的wx.clearStorageSync，这个会清除其他的所有缓存，而我只是想清除这一个key的缓存
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序 弹窗自定义的代码
微信小程序的消息提示框的实现


以上就是微信小程序中缓存的解析的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！