微信小程序 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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
js实现通过开始结束控制的计时器
Feb 25 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php备份数据库类分享
2015/04/14 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
js tab效果的实现代码
2009/12/26 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Vue实现购物车功能
2017/04/27 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python3.7 的新特性详解
2019/07/25 Python
Python使用贪婪算法解决问题
2019/10/22 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
校园活动策划书范文
2014/01/10 职场文书
团购业务员岗位职责
2014/03/15 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书