微信小程序之缓存(本地缓存,同步缓存,异步缓存)

关于本地缓存

1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB

2.localStorage 是永久存储

一、异步缓存

wx.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容

 
  1. wx.setStorage({

  2. key:"key",

  3. data:"value"

  4. })

wx.getStorage(OBJECT)

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

 
  1. wx.getStorage({

  2. key: 'key',

  3. success: function(res) {

  4. console.log(res.data)

  5. }

  6. })

wx.getStorageInfo(OBJECT)

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

 
  1. wx.getStorageInfo({

  2. success: function(res) {

  3. console.log(res.keys)

  4. console.log(res.currentSize)

  5. console.log(res.limitSize)

  6. }

  7. })

wx.removeStorage(OBJECT)

从本地缓存中异步移除指定 key 。

 
  1. wx.removeStorage({

  2. key: 'key',

  3. success: function(res) {

  4. console.log(res.data)

  5. }

  6. })

二、同步缓存

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

wx.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

wx.getStorageInfoSync

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

wx.removeStorageSync(KEY)

从本地缓存中同步移除指定 key 。

三、清理缓存

wx.clearStorage()

清理本地数据缓存。

wx.clearStorageSync()

同步清理本地数据缓存

关于同步缓存和异步缓存的区别

以Sync(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。

但是一般情况下不要用清除所有的缓存,如果想要清除相应的缓存,设置对应的缓存内容为空数组就好

关于历史搜索

 
  1. 搜索

  2.  
  3.  
  4. 历史搜索

  5. 删除搜索历史

  6. {{item == null?'暂无数据':item}}

页面

这里有三个绑定事件

  • bindinput="searchNameInput" 获取用户输入的数据
  • bindtap="setSearchStorage" 设置本地存储
  • bindtap="deleteHistory" 删除历史搜索
 
  1. //获取用户输入框的值

  2. searchNameInput:function(e){

  3. var that = this;

  4. that.setData({

  5. inputValue:e.detail.value

  6. })

  7. }

e.detail.value就代表了当前输入值

当点击搜索的时候,bindtap="setSearchStorage"

 
  1. //将用户输入的内容存入本地缓存,并且将搜索数据放到首页

  2. setSearchStorage:function(){

  3. var that = this

  4. if(this.data.inputValue != ''){

  5. //调用API向本地缓存存入数据

  6. var searchData = wx.getStorageSync('searchData') || []

  7. searchData.push(this.data.inputValue)

  8. wx.setStorageSync('searchData', searchData)

  9.  
  10. //读取用户搜索商品

  11. var name = this.data.inputValue

  12. wx.request({

  13. url: 'www.shop.com/home/product/search',

  14. data: {name:name},

  15. method: 'GET',

  16. success: function(res){

  17. that.setData({

  18. goodsList: res.data.info,

  19. })

  20. },

  21. })

  22. }

  23. }

流程这么走:

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

 
  1. //从本地获取历史搜索数据

  2. var searchData = wx.getStorageSync('searchData')||[]

  3. this.setData({

  4. searchData:searchData

  5. })

  6.  
  7. deleteHistory

  8.  
  9. //删除历史搜索数据

  10. deleteHistory:function(){

  11. var that = this

  12. wx.showModal({

  13. title: '提示',

  14. content: '是否删除历史搜索',

  15. success: function(res) {

  16. if (res.confirm) {

  17. wx.setStorageSync('searchData', []);

  18. wx.switchTab({

  19. url: '/pages/index/index',

  20. })

  21. }

  22. }

  23. })

  24. }

这里是将'searchData'这个key的缓存的value为空数组,而不是使用API提供的wx.clearStorageSync,这个会清除其他的所有缓存,而我只是想清除这一个key的缓存

你可能感兴趣的:(WeChat)