微信小程序 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的将桌面应用程序引入浏览器
Nov 19 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
JavaScript实现点击自制菜单效果
Feb 02 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中json_encode中文编码问题分析
2011/09/13 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
python操作oracle的完整教程分享
2018/01/30 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python处理“
2019/06/10 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python能做什么
2020/06/02 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
机电一体化职业规划书
2014/01/07 职场文书
违反学校规定检讨书
2014/01/18 职场文书
整脏治乱工作简报
2015/07/21 职场文书
python本地文件服务器实例教程
2021/05/02 Python
Django框架中视图的用法
2022/06/10 Python