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


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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
javascript实现轮显新闻标题链接
Aug 13 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
js中的数组对象排序分析
Dec 11 Javascript
vue自动化路由的实现代码
Sep 30 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
帝国cms常用标签汇总
2015/07/06 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python求解汉诺塔游戏
2020/07/09 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
大专生自我评价
2014/01/28 职场文书
工作态度检讨书
2014/02/11 职场文书
销售内勤岗位职责
2014/04/15 职场文书
商业街策划方案
2014/05/31 职场文书
捐款活动总结
2014/08/27 职场文书
党员民主评议自我评价
2014/10/20 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL