微信小程序 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的面向对象方法以及差别
Mar 31 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
详解Layer弹出层样式
Aug 21 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
js实现幻灯片轮播图
Aug 14 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
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JavaScript知识点整理
2015/12/09 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
微信小程序之选项卡的实现方法
2017/09/29 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
vscode下的vue文件格式化问题
2018/11/28 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Python pip使用超时问题解决方案
2020/08/03 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
运动会入场解说词
2014/02/07 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
简历自我评价模板
2015/03/11 职场文书
员工家属慰问信
2015/03/24 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
家长会开场白和结束语
2015/05/29 职场文书
高中生军训感言
2015/08/01 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
redis限流的实际应用
2021/04/24 Redis