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


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 相关文章推荐
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
vue实现简单计算商品价格
Sep 14 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 反向排序和随机排序代码
2010/06/30 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php图像处理类实例
2015/07/28 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
python中去空格函数的用法
2014/08/21 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python游戏地图最短路径求解
2019/01/16 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
学生会竞选演讲稿纪检部
2014/08/25 职场文书
普通党员整改措施
2014/10/24 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
nginx之queue的具体使用
2022/06/28 Servers