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


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 源码分析笔记(7) Queue
Jun 19 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
angularJS 入门基础
Feb 09 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
限制只能输入数字的实现代码
May 16 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 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
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
php5与php7的区别点总结
2019/10/11 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
前端常见跨域解决方案(全)
2017/09/19 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Python修改MP3文件的方法
2015/06/15 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python实现扫描日志关键字的示例
2018/04/28 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
智能电子应届生求职信
2013/11/10 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书