微信小程序 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实现的分页函数
Dec 22 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
理解javascript对象继承
Apr 17 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
js实现微博发布小功能
Jan 12 Javascript
jquery编写日期选择器
Mar 16 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 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
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP重定向的3种方式
2013/03/07 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP实现图片压缩
2020/09/09 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python简单分割文件的方法
2015/07/30 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
班主任师德师风自我剖析材料
2014/10/02 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android