微信小程序 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 document.referrer判断访客来源网址
May 15 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
详解vue高级特性
Jun 09 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
浅谈PHP语法(1)
2006/10/09 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
Python中encode()方法的使用简介
2015/05/18 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
delegate与普通函数的区别
2014/01/22 面试题
后勤自我鉴定
2013/10/13 职场文书
会计电算化专业应届大学生求职信
2013/10/22 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2015年读书月活动总结
2015/03/26 职场文书
家长会主持词开场白
2015/05/29 职场文书