微信小程序 数据缓存实现方法详解


Posted in Javascript onAugust 26, 2019

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

wx.setStorage()---------异步设置缓存

微信官方给出的属性

OBJECT参数说明:

参数 类型 必填 说明
key String 本地缓存中的指定的 key
data Object/String 需要存储的内容
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

调用方式:

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

wx.setStorageSync()---------同步设置缓存

微信官方给出的属性

参数说明:

参数 类型 必填 说明
key String 本地缓存中的指定的 key
data Object/String 需要存储的内容

调用方式:

try {
  wx.setStorageSync('key', 'value')
} catch (e) {  
}

wx.getStorage()--------异步获取缓存

微信官方给出的属性

OBJECT参数说明:

参数 类型 必填 说明
key String 本地缓存中的指定的 key
success Function 接口调用的回调函数,res = {data: key对应的内容}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数 类型 说明
data String key对应的内容

调用方式:

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

wx.getStorageSync()--------同步获取缓存数据

微信官方给出的属性说明

参数说明:

参数 类型 必填 说明
key String 本地缓存中的指定的 key

调用方式:

try {
 var value = wx.getStorageSync('key')
 if (value) {
   // Do something with return value
 }
} catch (e) {
 // Do something when catch error
}

wx.getStorageInfo()------异步获取当前缓存的数据

微信官方给出的属性说明

OBJECT参数说明:

参数 类型 必填 说明
success Function 接口调用的回调函数,详见返回参数说明
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数 类型 说明
keys String Array 当前storage中所有的key
currentSize Number 当前占用的空间大小, 单位kb
limitSize Number 限制的空间大小,单位kb

调用方式:

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

wx.getStorageInfoSync()-------同步获取当前缓存数据

emmmmm---微信并没有给参数说明

调用方式:

try {
 var res = wx.getStorageInfoSync()
 console.log(res.keys)
 console.log(res.currentSize)
 console.log(res.limitSize)
} catch (e) {
 // Do something when catch error
}

wx.removeStorage()-----异步移除指定的key的缓存数据

微信官方参数说明

OBJECT参数说明:

参数 类型 必填 说明
key String 本地缓存中的指定的 key
success Function 接口调用的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

调用方式:

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

wx.removeStorageSync()------同步移除指定key的缓存数据

微信官方参数说明

参数说明:

参数 类型 必填 说明
key String 本地缓存中的指定的 key

调用方式:

try {
 wx.removeStorageSync('key')
} catch (e) {
 // Do something when catch error
}

wx.clearStorage()------异步清理本地缓存

调用方式:

wx.clearStorage()

wx.clearStorageSync()-------同步清理本地缓存

调用方式:

try {
  wx.clearStorageSync()
} catch(e) {
 // Do something when catch error
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
使用angular写一个hello world
Jan 23 Javascript
jQuery限制图片大小的方法
May 25 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
使用typescript构建Vue应用的实现
Aug 26 #Javascript
微信小程序实现手势滑动卡片效果
Aug 26 #Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 #Javascript
vue柱状进度条图像的完美实现方案
Aug 26 #Javascript
React传值 组件传值 之间的关系详解
Aug 26 #Javascript
js实现指定时间倒计时效果
Aug 26 #Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
vuejs如何配置less
2017/04/25 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python排序算法实例代码
2017/08/10 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
机电专业毕业生求职信
2013/10/27 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
环保倡议书范文
2014/05/12 职场文书
团队精神的演讲稿
2014/05/14 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2015年企业新年寄语
2014/12/08 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
Golang 结构体数据集合
2022/04/22 Golang