微信小程序 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 相关文章推荐
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
微信开发 微信授权详解
Oct 21 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
vue-router为激活的路由设置样式操作
Jul 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 清除网页病毒的方法
2008/12/05 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
python中的列表推导浅析
2014/04/26 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python 爬虫图片简单实现
2017/06/01 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
团队拓展活动总结
2014/08/27 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
小学校长个人总结
2015/03/03 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技