微信小程序 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 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
json的使用小结
Jun 08 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
微信小程序 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
Django日志模块logging的配置详解
2017/02/14 Python
Python制作Windows系统服务
2017/03/25 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
Python如何读写字节数据
2020/08/05 Python
python复合条件下的字典排序
2020/12/18 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
求职毕业生自荐书
2014/02/08 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
学校捐书活动总结
2015/05/08 职场文书
2015入党自传书范文
2015/06/26 职场文书
公司食堂管理制度
2015/08/05 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android