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


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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
vue实现计算器功能
Feb 22 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
React配置子路由的实现
Jun 03 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和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
js编写简易的计算器
2020/07/29 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
Python库安装速度过慢解决方案
2020/07/14 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
学生自我评价范文
2014/02/02 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
详解Redis复制原理
2021/06/04 Redis
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫