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


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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
alert和confirm功能介绍
May 21 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
vuex存储token示例
Nov 11 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
解决laravel session失效的问题
2019/10/14 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Djang中静态文件配置方法
2015/07/30 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
pandas.cut具体使用总结
2019/06/24 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
公司委托书范本
2014/04/04 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
汽车维修求职信
2014/06/15 职场文书
学用政策心得体会
2014/09/10 职场文书
收款委托书范本
2014/09/11 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
如何正确理解python装饰器
2021/06/15 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技