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


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 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
微信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
一个程序下载的管理程序(三)
2006/10/09 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Python 探针的实现原理
2016/04/23 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
多个应用共存的Django配置方法
2018/05/30 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
用python绘制樱花树
2020/10/09 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
师生聚会感言
2014/01/26 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
教育见习报告范文
2014/11/03 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书