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


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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
javascript学习小结之prototype
Dec 03 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
js实现随机数小游戏
Jun 28 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 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&java(二)
2006/10/09 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python如何绘制日历图和热力图
2020/08/07 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
销售工作岗位职责
2013/12/24 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
信访维稳工作汇报
2014/10/27 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
老公出轨后的保证书
2015/05/08 职场文书
婚庆答谢词大全
2015/09/29 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python