微信小程序 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判断背景图片是否加载成功使用img的width实现
May 29 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
js中split和replace的用法实例
Feb 28 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
JS将unicode码转中文方法
May 08 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
vue实现员工信息录入功能
Jun 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中的float类型使用说明
2010/07/27 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
Python yield 小结和实例
2014/04/25 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python定时器实例代码
2017/11/01 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python列表解析操作实例总结
2020/02/26 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
西门豹教学反思
2014/02/04 职场文书
顶撞老师检讨书
2014/02/07 职场文书
食堂标语大全
2014/06/11 职场文书
文明寝室标语
2014/06/13 职场文书
导游欢送词
2015/01/31 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang