电商小程序08调用缓存

目录

  • 1 将信息存入缓存中
  • 2 获取登录信息
  • 3 退出登录
  • 4 发布预览
  • 总结

小程序的登录功能里,如果只是将登录信息保存到全局变量中,存在的问题是如果小程序重新打开,用户的登录状态就丢失了。为了解决这个问题,我们需要用到微搭的缓存的功能,本篇就介绍一下如何加载缓存。

1 将信息存入缓存中

切换到我们的登录页面,打开我们的登录方法
在这里插入图片描述

在全局变量赋值的后边,增加一个缓存存入的动作

$w.utils.setStorage({ key: "user", data: $w.app.dataset.state.user });

api的调用要参考官方文档
在这里插入图片描述
key相当于给我们存入的信息起了一个名字,后续在获取的时候就可以根据这个名字来取。而data相当于我们需要存入的数据,这里我们存入了全局变量

完整的代码

export default async function ({ event, data }) {const username = $w.input1.valueconst password = $w.input2.valueconst agree = $w.radio1.valueconsole.log('agree', agree, typeof (agree))if (agree == '1') {const user = await $w.cloud.callDataSource({dataSourceName: "zcyhxx_7diyeuv",methodName: "wedaGetItemV2",params: {// 筛选内容,筛选内容推荐使用编辑器数据筛选器生成filter: {where: {$and: [{zh: {$eq: username, // 获取单条时,推荐传入_id数据标识进行操作},},{mm: {$eq: password, // 获取单条时,推荐传入_id数据标识进行操作},},],},},select: {$master: true, // 常见的配置,返回主表},},});console.log('user', user)if (user._id) {$w.app.dataset.state.user = user$w.utils.setStorage({ key: "user", data: $w.app.dataset.state.user });//wx.setStorageSync('user', $w.app.dataset.state.user)$w.utils.redirectTo({pageId: "index", // 页面 IdpackageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});} else {$w.utils.showToast({title: "用户名或者密码错误",icon: "error",duration: 2000, // 2秒});}} else {$w.utils.showToast({title: "请勾选用户协议",icon: "error",duration: 2000, // 2秒});}
}

2 获取登录信息

在登录时候已经将用户信息存入了缓存中,在首页我们就需要从缓存中获取。在代码区,点击新建,创建一个自定义方法,命名为Load
在这里插入图片描述
输入如下代码

export default async function ({ event, data }) {try {const user = await $w.utils.getStorage({ key: "user" }); console.log('user', user)if (user && Object.keys(user.data).length > 0) {$w.app.dataset.state.user = user.data}console.log(user);} catch (err) {console.error(err);}}

首先调用了微搭获取缓存的方法,官方文档如下
在这里插入图片描述
通过key可以获取到我们存入的对象,这里要注意的是,返回的对象要继续获取data属性才是我们真正需要的内容

获取到之后我们就判断对象是否有值,如果有值我就赋值给全局变量。

然后选中页面组件,设置加载方法,调用我们的自定义方法
在这里插入图片描述

3 退出登录

有登录就需要有退出,退出的逻辑就是删除我们的缓存,在我的页面,我们添加一个按钮用来实现退出的功能
在这里插入图片描述
在代码区,添加一个自定义方法,起名字叫logout,写入如下代码

export default async function ({ event, data }) {$w.utils.removeStorage({ key: "user" });$w.app.dataset.state.user = {}$w.utils.redirectTo({pageId: "index", // 页面 IdpackageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});
}

这里先调用了删除缓存的api,官方文档如下
在这里插入图片描述
通过key来删除缓存,我们在登录的时候存入的key是user,这里也需要通过这个key删除缓存。删除完缓存之后将全局变量赋值为空对象,保证跳转回首页的时候显示的是登录按钮

4 发布预览

因为这几个api其实是对微信小程序的api的封装,我们需要发布一下,在手机上看到具体的效果
在这里插入图片描述
真机体验的时候,记得把小程序销毁,然后再次打开,看看具体的效果。如果只是关掉小程序,他还是在后台运行,你再点击的时候只是重新显示了。

总结

本篇我们介绍了微搭缓存的使用,存入用户信息只是一个方面的应用,在后续实现购物车的功能时,还需要借助缓存的能力,敬请期待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/473023.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 车载应用开发之SystemUI 详解

一、SystemUI SystemUI全称System User Interface,直译过来就是系统级用户交互界面,在 Android 系统中由SystemUI负责统一管理整个系统层的 UI,它是一个系统级应用程序(APK),源码在/frameworks/base/packages/目录下,而不是在/packages/目录下,这也说明了SystemUI这个…

简单聊聊k8s,和docker之间的关系

前言 随着云原生和微服务架构的快速发展,Kubernetes和Docker已经成为了两个重要的技术。但是有小伙伴通常对这两个技术的关系产生疑惑: 既然有了docker,为什么又出来一个k8s? 它俩之间是竞品的关系吗? 傻傻分不清。…

【排序算法】C语言排序(桶排序,冒泡排序,选择排序,插入排序,快速排序)

目录 什么是排序?1、桶排序 概念思路demo运行效果 2、冒泡排序 动图演示概念思路demo运行效果 3、选择排序 动图演示概念思路demo运行结果 4、插入排序 动图演示概念思路demo运行效果 5、快速排序 动图演示概念思路demo运行结果 什么是排序? 排序&…

1.8 NLP自然语言处理

NLP自然语言处理 更多内容,请关注: github:https://github.com/gotonote/Autopilot-Notes.git 一、简介 seq2seq(Sequence to Sequence)是一种输入不定长序列,产生不定长序列的模型,典型的处理任务是机器翻译&#…

Vue中 如何监听键盘事件中的按键

在Web前端开发中,键盘事件的处理是非常常见的需求之一。而在Vue框架中,如何监听键盘事件中的按键是一个相对简单但又很实用的功能。本文将为你介绍如何在Vue中监听键盘事件,并演示一些常用的按键操作。 首先,在Vue中监听键盘事件…

单片机学习笔记---LED呼吸灯直流电机调速

目录 LED呼吸灯 直流电机调速 模型结构 波形 定时器初始化函数 中断函数 主程序 上一节讲了电机的工作原理,这一节开始代码演示! 我们上一篇说Ton的时间长Toff时间短电机会快,Ton的时间短Toff时间长电机会慢 并且我们还要保证无论Ton和…

【数据结构】二叉查找树和平衡二叉树,以及二者的区别

目录 1、二叉查找树 1.1、定义 1.2、查找二叉树的优点 1.2、查找二叉树的弊端 2、平衡二叉树 2.1、定义 2.2、 实现树结构平衡的方法(旋转机制) 2.2.1、左旋 2.2.2、右旋 3、总结 1、二叉查找树 二叉查找树又名二叉排序树,亦称二叉搜…

Day01 javaweb开发——tlias员工管理系统

任务介绍 完成部门管理和员工管理的增删改查功能 环境搭建 前端---->后端---->数据库 准备数据库表创建springboot工程(web、mybatis、mysql驱动、lombok)application.properties中引入mybatis配置信息,准备对应的实体类准备三层架…

《中国教育报》2024投稿攻略

《中国教育报》2024投稿攻略 《中国教育报》普通版,1800字符1/4版,2300字符1/3版;周期1-2个月 《中国教育报》理论版 收中小学,全包1800字符;2500字符。收高校 2000-2300字符,六个月周期。 《中国教育…

1、若依(前后端分离)框架的使用

若依(前后端分离)框架的使用 0、环境1、下载若依(1) 下载并解压(2) 导入SQL语句(3) 配置Redis、MySQL 2、运行若依3、登录(1) 前端(2) 后端 4、获取用户角色、权限和动态路由(1) 获取用户角色、权限(2) 根据用户信息获取动态路由【getRouters】 5、杂6、…

Rust中不可变变量与const有何区别?

Rust作者认为变量默认应该是immutable,即声明后不能被改变的变量。这一点是让跨语言学习者觉得很别扭,不过这一点小的改变带来了诸多好处,本节我们来学习Rust的变量。 什么是变量? 如果你初次学习编程语言,变量会是一…

GPT-4对编程开发的支持

在编程开发领域,GPT-4凭借其强大的自然语言理解和代码生成能力,能够深刻理解开发者的意图,并基于这些需求提供精准的编程指导和解决方案。对于开发者来说,GPT-4能够在代码片段生成、算法思路设计、模块构建和原型实现等方面给予开…