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


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 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
Boostrap入门准备之border box
May 09 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 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可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
seajs下require书写约定实例分析
2018/05/16 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Python日期的加减等操作的示例
2017/08/15 Python
对python字典过滤条件的实例详解
2019/01/22 Python
解决Django no such table: django_session的问题
2020/04/07 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Python gevent协程切换实现详解
2020/09/14 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
应届生煤化工求职信
2013/10/21 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
元旦标语大全
2014/10/09 职场文书
四年级小学生评语
2014/12/26 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server