微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解

前端之家收集整理的这篇文章主要介绍了微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序 缓存

关于本地缓存

可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB

一、异步缓存

wx.setStorage(OBJECT)

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

key:"key",data:"value"

})

wx.getStorage(OBJECT)

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

key: 'key',success: function(res) {

console.log(res.data)

}

})

wx.getStorageInfo(OBJECT)

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

success: function(res) {

console.log(res.keys)

console.log(res.currentSize)

console.log(res.limitSize)

}

})

wx.removeStorage(OBJECT)

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

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

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

关于历史搜索

搜索的内容" bindinput="searchNameInput"/> 搜索 搜索 删除搜索历史 {{item == null?'暂无数据':item}}

页面

这里有三个绑定事件

获取用户输入的数据

删除历史搜索

//获取用户输入框的值
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)
//读取<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>商品
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

获取本地名字为'searchData'的缓存,如果'searchData'这个缓存不存在就相当于重新什么一个空数组,赋值给searchData这个变量

用户输入的值PUSH进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: '<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>',content: '是否<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>历史<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>',success: function(res) {

  if (res.confirm) {

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

    wx.switchTab({

      url: '/pages/index/index',})

   }

  }

})

}

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/weapp/42426.html

猜你在找的微信小程序相关文章