微信小程序 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 indexOf使用方法
Aug 19 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
Javascript 解构赋值详情
Nov 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
小偷PHP+Html+缓存
2006/11/25 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
javascript 动态创建表格
2015/01/08 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
理解javascript模块化
2016/03/28 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
2015年大学生党员承诺书
2015/04/27 职场文书
色戒观后感
2015/06/12 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
Go语言基础map用法及示例详解
2021/11/17 Golang
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS