微信小程序 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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Node.JS如何实现JWT原理
Sep 18 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
javascript数组的使用
2013/03/28 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
python自定义类并使用的方法
2015/05/07 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
毕业生自荐信格式
2014/03/07 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
社区文化建设方案
2014/05/02 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
四年级学生期末评语
2014/12/26 职场文书