小程序教程

微信小程序把玩(三十六)Storage API

字号+ 作者: 来源: 2016-11-23 09:49 我要评论( )

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

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

获取方法:

wx.getStorage(object)

清除方法:

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

同步存储方法:

存数据 相同key会覆盖

wx.setStorageSync(key,data)

读数据

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

清除数据

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

wxml

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


  9. <text>{{storageSyncContent}}</text>
  10. <button type="primary" bindtap="listenerStorageSyncSave">storageSync存储信息会在text上显示</button>
  11. <button type="primary" bindtap="listenerStorageSyncGet">获取storageSync存储信息</button>
  12. <button type="warn" bindtap="listenerStorageSyncClear">清除同步存储数据</button>
复制代码

js

  1. Page({
  2.   data:{
  3.     // text:"这是一个页面"
  4.     storageContent: '',
  5.     storageSyncContent: ''
  6.   },
  7.   onLoad:function(options){
  8.     // 页面初始化 options为页面跳转所带来的参数
  9.   },
  10.   /**
  11.    * 异步存储
  12.    */
  13.   listenerStorageSave: function() {
  14.     //以键值对的形式存储 传进去的是个对象
  15.     wx.setStorage({
  16.       key: 'key',
  17.       data: '我是storeage异步存储的信息',
  18.       success: function(res) {
  19.         console.log(res)
  20.       }
  21.     })
  22.   },
  23.   /**
  24.    * 异步取信息
  25.    */
  26.   listenerStorageGet: function() {
  27.     var that = this;
  28.     wx.getStorage({
  29.       //获取数据的key
  30.       key: 'key',
  31.       success: function(res) {
  32.         console.log(res)
  33.         that.setData({
  34.           //
  35.           storageContent: res.data
  36.         })
  37.       },
  38.       /**
  39.        * 失败会调用
  40.        */
  41.       fail: function(res) {
  42.         console.log(res)
  43.       }
  44.     })
  45.   },

  46.   /**
  47.    * 清除数据
  48.    */
  49.   listenerStorageClear: function() {
  50.     var that = this;
  51.     wx.clearStorage({
  52.       success: function(res) {
  53.         that.setData({
  54.           storageContent: ''
  55.         })
  56.       }
  57.     })
  58.   },


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

  65.   /**
  66.    * 数据同步获取
  67.    */
  68.   listenerStorageSyncGet: function() {
  69.     // var that = this;
  70.     var value = wx.getStorageSync('key')
  71.     this.setData({
  72.       storageSyncContent: value
  73.     })
  74.   },

  75.   /**
  76.    * 清除同步存储数据
  77.    */
  78.   listenerStorageSyncClear: function() {
  79.     wx.clearStorageSync()
  80.   },

  81.   onReady:function(){
  82.     // 页面渲染完成
  83.   },
  84.   onShow:function(){
  85.     // 页面显示
  86.   },
  87.   onHide:function(){
  88.     // 页面隐藏
  89.   },
  90.   onUnload:function(){
  91.     // 页面关闭
  92.   }
  93. })
复制代码


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评