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

作者:李维山 时间:2024-04-22 12:42:49 

本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考,具体如下:

前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微信小程序的本地数据缓存功能。

【将数据存储在本地缓存】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()

希望本文所述对大家微信小程序开发有所帮助。

来源:https://blog.csdn.net/msllws/article/details/83992384

标签:微信小程序,数据缓存
0
投稿

猜你喜欢

  • js鼠标滑过图片震动特效的方法

    2023-08-23 21:38:50
  • 用于ETL的Python数据转换工具详解

    2022-11-09 18:29:05
  • ActionScript3.0是革命性的

    2008-05-01 12:36:00
  • python里的条件语句和循环语句你了解多少

    2022-07-19 02:27:49
  • Python中用sleep()方法操作时间的教程

    2023-11-27 10:45:28
  • 浅谈Python线程的同步互斥与死锁

    2022-06-26 17:38:37
  • python基础之集合

    2022-04-21 05:03:50
  • python如何发布自已pip项目的方法步骤

    2023-01-22 01:17:36
  • 表单特殊输入js验证

    2008-03-26 12:01:00
  • Python3中关于cookie的创建与保存

    2023-11-29 00:29:22
  • 利用PyQt5制作一个豆瓣电影信息查看器

    2021-03-05 05:57:28
  • 除Console.log()外更多的Javascript调试命令

    2023-08-12 23:31:17
  • python matplotlib绘图,修改坐标轴刻度为文字的实例

    2023-09-29 12:27:57
  • 详解PHP设计模式之桥接模式

    2023-05-30 10:29:02
  • 解决python 读取npy文件太大不能完全显示的问题

    2021-08-20 12:07:19
  • Python进阶学习之特殊方法实例详析

    2022-03-03 22:15:04
  • 两种不同的方法实现js对checkbox进行全选和反选

    2024-04-10 16:14:50
  • 一段Asp301重定向过程代码

    2010-05-04 16:38:00
  • Python实现全排列的打印

    2021-09-01 04:08:30
  • Python中的单行、多行、中文注释方法

    2022-03-21 21:56:38
  • asp之家 网络编程 m.aspxhome.com