微信小程序 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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
js常用正则表达式集锦
May 17 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP类的特性实例分析
2016/09/28 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python一键升级所有pip package的方法
2017/01/16 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python做反被爬保护的方法
2019/07/01 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
小学生操行评语
2014/04/22 职场文书
商铺门面租房协议书
2014/10/21 职场文书
教师节倡议书2015
2015/04/27 职场文书
音乐课外活动总结
2015/05/09 职场文书
教师读书活动心得体会
2016/01/14 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
nginx配置之并发频次限制
2022/04/18 Servers