微信小程序 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中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
原生js生成图片验证码
Oct 11 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个人网站架设连环讲(二)
2006/10/09 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
composer.lock文件的作用
2016/02/03 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
javascript this用法小结
2008/12/19 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python3 深浅copy对比详解
2019/08/12 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python简单实现插入排序实例代码
2020/12/16 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
大学生大二自我鉴定
2013/10/28 职场文书
高中班长自我鉴定
2013/12/20 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
人事部专员岗位职责
2014/03/04 职场文书
村级换届选举方案
2014/05/10 职场文书
水浒传读书笔记
2015/06/25 职场文书
mysql脏页是什么
2021/07/26 MySQL
logback 实现给变量指定默认值
2021/08/30 Java/Android
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
关于Python中进度条的六个实用技巧分享
2022/04/05 Python