微信小程序 Storage API实例详解


Posted in Javascript onOctober 02, 2016

微信小程序 Storage API实例详解

其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步

异步存储方法:

存数据

wx.setStorage(object) 相同key会覆盖,可写回调方法

微信小程序 Storage API实例详解

获取方法:

wx.getStorage(object)

微信小程序 Storage API实例详解

清除方法:

wx.clearStorage()里面可以写回调函数 成功,失败,完成

同步存储方法:

存数据 相同key会覆盖

wx.setStorageSync(key,data)

读数据

wx.getStorageSync(key) 存储是指定的key

清除数据

wx.clearStorageSync() 不可写回调方法

wxml

<!--动态获取数据-->
<text>{{storageContent}}</text>
<!--存-->
<button type="primary" bindtap="listenerStorageSave">storage存储信息会在text上显示</button>
<!--取-->
<button type="primary" bindtap="listenerStorageGet">获取storage存储的信息</button>
<!--清-->
<button type="warn" bindtap="listenerStorageClear">清楚异步存储数据</button>


<text>{{storageSyncContent}}</text>
<button type="primary" bindtap="listenerStorageSyncSave">storageSync存储信息会在text上显示</button>
<button type="primary" bindtap="listenerStorageSyncGet">获取storageSync存储信息</button>
<button type="warn" bindtap="listenerStorageSyncClear">清除同步存储数据</button>

js

Page({
 data:{
  // text:"这是一个页面"
  storageContent: '',
  storageSyncContent: ''
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 /**
  * 异步存储
  */
 listenerStorageSave: function() {
  //以键值对的形式存储 传进去的是个对象
  wx.setStorage({
   key: 'key',
   data: '我是storeage异步存储的信息',
   success: function(res) {
    console.log(res)
   }
  })
 },
 /**
  * 异步取信息
  */
 listenerStorageGet: function() {
  var that = this;
  wx.getStorage({
   //获取数据的key
   key: 'key',
   success: function(res) {
    console.log(res)
    that.setData({
     //
     storageContent: res.data
    })
   },
   /**
    * 失败会调用
    */
   fail: function(res) {
    console.log(res)
   }
  })
 },

 /**
  * 清除数据
  */
 listenerStorageClear: function() {
  var that = this;
  wx.clearStorage({
   success: function(res) {
    that.setData({
     storageContent: ''
    })
   }
  })
 },


 /**
  * 数据同步存储
  */
 listenerStorageSyncSave: function() {
  wx.setStorageSync('key', '我是同步存储的数据')
 },

 /**
  * 数据同步获取
  */
 listenerStorageSyncGet: function() {
  // var that = this;
  var value = wx.getStorageSync('key')
  this.setData({
   storageSyncContent: value
  })
 },

 /**
  * 清除同步存储数据
  */
 listenerStorageSyncClear: function() {
  wx.clearStorageSync()
 },

 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
JS中字符串trim()使用示例
May 26 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vue 中filter的多种用法
Apr 26 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
微信小程序 Video API实例详解
Oct 02 #Javascript
老生常谈JavaScript中的this关键字
Oct 01 #Javascript
ES6新特征数字、数组、字符串
Oct 01 #Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 #Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 #Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 #Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
初婚未育未抱养证明
2014/01/12 职场文书
效能监察建议书
2014/05/19 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
机动车交通事故协议书
2015/01/29 职场文书
暂住证明怎么写
2015/06/19 职场文书
关于感恩的作文
2019/08/26 职场文书