这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解的相关资料, 需要的朋友可以参考下
微信小程序 缓存
关于本地缓存
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 = 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: '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 = 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 的缓存
来源: http://www.phperz.com/article/17/0627/328437.html