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


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 UI-Draggable 参数集合
Jan 10 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python检查ping终端的方法
2019/01/26 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Django web框架使用url path name详解
2019/04/29 Python
python3对接mysql数据库实例详解
2019/04/30 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Django框架请求生命周期实现原理
2020/11/13 Python
python线程优先级队列知识点总结
2021/02/28 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
网页美工求职信
2014/02/15 职场文书
爱心倡议书范文
2014/05/12 职场文书
护士医德考评自我评价
2015/03/03 职场文书
土建技术员岗位职责
2015/04/11 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书