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


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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
纯javascript版日历控件
Nov 24 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 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 和 MYSQL
2006/10/09 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
Java如何格式化日期
2012/08/07 面试题
销售经理工作职责
2014/02/03 职场文书
党员个人公开承诺书
2014/08/29 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
货款欠条范本
2015/07/03 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android