小程序教程

微信小程序把玩（三十六）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>


  11. <text>{{storageSyncContent}}</text>
  12. <button type="primary" bindtap="listenerStorageSyncSave">storageSync存储信息会在text上显示</button>
  13. <button type="primary" bindtap="listenerStorageSyncGet">获取storageSync存储信息</button>
  14. <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.   },

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


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

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

  80.   /**
  81.    * 清除同步存储数据
  82.    */
  83.   listenerStorageSyncClear: function() {
  84.     wx.clearStorageSync()
  85.   },

  87.   onReady:function(){
  88.     // 页面渲染完成
  89.   },
  90.   onShow:function(){
  91.     // 页面显示
  92.   },
  93.   onHide:function(){
  94.     // 页面隐藏
  95.   },
  96.   onUnload:function(){
  97.     // 页面关闭
  98.   }
  99. })
复制代码


　

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

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

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

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

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习