首页 / 脚本样式 / JavaScript / 微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解

微信小程序 缓存
关于本地缓存
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 = thisif（this.data.inputValue ！= ""）{//调用API向本地缓存存入数据var searchData = wx.getStorageSync（"searchData"） || [] searchData.push（this.data.inputValue） wx.setStorageSync（"searchData", searchData）//读取用户搜索商品var name = this.data.inputValuewx.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 = thiswx.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的缓存
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！