微信小程序 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代码
Jan 01 Javascript
ie 调试javascript的工具
Apr 29 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
JS实现简单日历特效
Jan 03 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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 preg_replace替换实例讲解
2013/11/04 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php字符集转换
2017/01/23 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
在Python中append以及extend返回None的例子
2019/07/20 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Python中logger日志模块详解
2020/08/04 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
自荐信格式的六要素
2013/09/21 职场文书
师范应届生教师求职信
2013/11/05 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年工程部工作总结
2015/04/30 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫