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


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 浮点数运算 精度问题
Oct 06 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
复制js对象方法(详解)
Jul 08 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
使用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数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
浅析PHP绘图技术
2013/07/03 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php显示时间常用方法小结
2015/06/05 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
多广告投放代码 推荐
2006/11/13 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python使用re模块实现信息筛选的方法
2018/04/29 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
决心书标准格式
2014/03/11 职场文书
学校四群教育实施方案
2014/06/12 职场文书
群教班子对照检查材料
2014/08/26 职场文书
2014和解协议书范文
2014/09/15 职场文书
借名购房协议书范本
2014/10/06 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js