微信小程序联盟：微信小程序缓存（本地缓存，同步缓存，异步缓存）

来源:微信小程序缓存 - 周起 - 博客园

作者：周起

本地缓存

1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）本地缓存可设置、获取和清理。本地缓存最大10MB

2.localStorage 是永久存储

一、异步缓存

wx.setStorage(O ** ECT)

将数据存储在本地缓存中指定的 key 中间会覆盖原来的 key 相应的内容

wx.setStorage({ key:"key", data:"value"})

wx.getStorage(O ** ECT)

从当地缓存中异步获取指定 key 相应的内容。

wx.getStorage({ key: 'key', success: function(res) { console.log(res.data) }})

wx.getStorageInfo(O ** ECT)

当前异步获取storage的相关信息

wx.getStorageInfo({ success: function(res) console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) }})

wx.removeStorage(O ** ECT)

从本地缓存中异步移除指定 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: ' ** .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的缓存

请关注更多干货：微信小程序联盟