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


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实现数字+字母验证码的简单实例
Feb 10 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
jQuery聚合函数实例
May 21 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
js的对象与函数详解
Jan 21 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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
js对象数组按属性快速排序
2011/01/31 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python列表切片用法示例
2017/04/19 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
详解Python 切片语法
2019/06/10 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
几个MySql的面试题
2013/04/22 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
暑假家长评语大全
2014/04/17 职场文书
java代码实现空间切割
2022/01/18 Java/Android
Oracle 触发器trigger使用案例
2022/02/24 Oracle
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python