微信小程序 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 相关文章推荐
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
微信小程序 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 进度条实现代码
2009/03/10 PHP
php 魔术方法详解
2014/11/11 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python中logging模块的用法实例
2014/09/29 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python flask框架端口失效解决方案
2020/06/04 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
个人现实表现材料
2014/02/04 职场文书
教育技术职业规划范文
2014/03/04 职场文书
授权委托书格式范文
2014/08/02 职场文书
代办出身证明书
2014/10/21 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Python读取和写入Excel数据
2022/04/20 Python