微信小程序学习笔记之本地数据缓存功能详解


Posted in Javascript onMarch 29, 2019

本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考,具体如下:

前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微信小程序的本地数据缓存功能。

【将数据存储在本地缓存】wx.setStorage

【读取本地缓存】wx.getStorage

以手机号+密码登录为例,把登录成功返回的token值存储在本地缓存中,然后读取缓存中的token:

login.php:

<?php 
  header("Content-type:text/html;charset=utf-8");
  $arr = array("state"=>0,"data"=>array(),"msg"=>'');
  $phone = $_POST['phone'];
  $password = $_POST['password'];
  if($phone && $password){
	//省略验证......

	//返回登录token
	$tokenstr = 'liweishan666';
	$token = $phone.time().$tokenstr;//省略加密

	$arr['state'] = 1;
	$arr['msg'] = '登录成功';
	$arr['data']['token'] = $token;
  }else{
	$arr['msg'] = '参数错误';
  }
  echo json_encode($arr);
  die;

login.wxml:

<form bindsubmit="formSubmit" bindreset="formReset">
 <view>
  手机号:<input type="text" name="phone" placeholder="请输入账号" confirm-type="done" />
  密码:<input password type="number" name="password" placeholder="请输入6位密码" maxlength="6" />
 </view>
 <view class="btn-area">
  <button formType="submit">登录</button>
 </view>

 <view class="btn-area">
  <button bindtap="gettoken">读取缓存token</button>
 </view>

 <view class="btn-area">{{token}}</view>
</form>

login.js:

Page({
 formSubmit: function (e) {
  wx.request({
   url: 'https://www.msllws.top/login.php',
   data: {
    'phone': e.detail.value.phone,
    'password': e.detail.value.password
   },
   method: 'POST',
   header: {
    'Content-Type': 'application/x-www-form-urlencoded'
   },
   success: function (res) {
    console.log(res.data);
    //以键值对的形式存储到本地缓存
    wx.setStorage({
     key: "token",
     data: res.data.data.token
    })
   },
   fail: function () { },
   complete: function () { }
  })
 },

 gettoken: function (e) {
  var that = this
  wx.getStorage({
   key: 'token',
   success: function (res) {
    that.setData({'token': res.data})
   },
   fail: function () { },
   complete: function () { }
  })
 }
})

实现缓存的存储和读取:

微信小程序学习笔记之本地数据缓存功能详解

【从缓存中移除指定数据】wx.removeStorage

wx.removeStorage({
 key: 'token',
 success (res) {
  console.log(res.data)
 } 
})

 【清除全部缓存数据】wx.clearStorage

wx.clearStorage()

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
Vue简单实现原理详解
May 07 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 #Javascript
详解vue配置后台接口方式
Mar 29 #Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 #Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 #Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 #Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 #Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
请离开include_once和require_once
2013/07/18 PHP
php伪静态之APACHE篇
2014/06/02 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php四种定界符详解
2017/02/16 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
python文件与目录操作实例详解
2016/02/22 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python解包用法详解
2021/02/17 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
法学毕业生自我鉴定
2013/11/08 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
水电施工员岗位职责
2015/04/11 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
python APScheduler执行定时任务介绍
2022/04/19 Python