【微信小程序系列:四】前端利用wx.setStorageSync缓存设置有效时间

news2025/7/19 17:27:27

先言:

简单来说,就是利用缓存,进行有效期的保存,以此前端加以判断,在如登录状态过期,操作过期等场景使用,扩展性还蛮多的。
官方文档

实现:

原理:就是先设置一个缓存,这个缓存值为当前时间加上有效期的时间。缓存会一直存在在本地。当到有效期后,执行判断,对比当前时间和缓存时间,如果现在时间大于缓存的值,证明过期了。

  1. 比如我设置一个缓存有效期是一天,过期后控制台输出‘有效期已过’。1秒等于1000毫秒,86400000毫秒是一天
    let applyTime = wx.getStorageSync("time"); // 获取时间缓存
     // 先判断存不存在此缓存,如果存在
    if(applyTime){
      // 当前时间大于有效期
        if (new Date().getTime() > applyTime) {
              // 设置一天有效期新缓存
              wx.setStorageSync("time", new Date().getTime() + 86400000);
             //有效期已过,在这执行某些操作
              console.log('有效期已过') 
            }
    }else{
     // 如果不存在,直接设置一天有效期新缓存
          wx.setStorageSync("time", new Date().getTime() + 604800000);
    }

  1. 也可以简单封装成给每个缓存的值都加个有效时间,有 存储方法和读取方法:
/**
 * 设置时效缓存
 * key    存储的key值
 * value  存储的value值 (不填则默认为1)
 * time   有效时间,(单位:毫秒,不填则默认一天)
 */
function setStorageSyncSecond(key, value, time) {
  value = value ? value : 1
  wx.setStorageSync(key, value)
  let t = time ? time : 86400000
  if (t > 0) { 
    wx.setStorageSync(key + 'dtime', t + new Date().getTime())
  } else {
    wx.removeStorageSync(key)
  }
}

/**
 * 读取时效缓存
 *  key  存储的key值
 * return 返回有值则有效期未过,返回false或者undefined证明有效期过了、或者该值已不存在
 */
function getStorageSyncTime(key){
  var deadtime = wx.getStorageSync(key + 'dtime')
  if (deadtime) {
    if (deadtime < new Date().getTime() ) {
      wx.removeStorageSync(key)
      wx.removeStorageSync(key + 'dtime')
      return false
    }else{
      return wx.getStorageSync(key)
     }
  }else{
    return false
  }
}

小知识:体验版和正式版小程序缓存数据共享。

结语:

上面的代码我也没验证过,我在文档上直接写的,仅供参考,主要是思路,如果出错还望指正。

最近在玩巫师3,虽然是15年的游戏了,但可玩性还是不错的~

在这里插入图片描述

我的哔哩哔哩空间
Gitee仓库地址:全部特效源码
其它文章:
~关注我看更多简单创意特效:
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等等
进我主页看更多~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

项目实战 之 vue3 + vite + pinia

目录 一、创建项目 1. 安装vite 2. 创建项目 3. 安装过程 二、项目基本配置 1. 项目icon 2. 项目标题 3. 配置 jsconfig.json 4. 设置 .prettierrc 文件 5. 生成代码片段 01 - 网址 02 - 生成 03 - 配置 04 - 使用 三、项目目录 结构划分 1. assets 2. compo…

require.context()的用法详解

require.context&#xff08;&#xff09;的用法详解&#x1f334;require.context()的介绍&#x1f33a;用法一&#xff1a;在组件内引入多个组件&#x1f33c;用法二&#xff1a;在main.js中引入大量公共组件&#x1f342;用法三&#xff1a;使用插件注册全局组件&#x1f33…

axios+vue 请求时如何携带cookie

axiosvue 请求时如何携带cookie 1&#xff0c;当符合同源策略时&#xff0c;可以直接设置 document.cookie " 你要设置的内容 " mounted() {document.cookie "ioiopipoadiasdasdbasdbas"; // 非跨域传递cookie 直接设置cookie即可this.getData(); /…

Node.js安装,npm安装yarn步骤

第一步&#xff0c;首先安装npm npm是node.js下的包管理器&#xff0c;node.js的下载网址 Node.js 1.下载安装包后一路无脑点击next最后点击finish即可&#xff0c;安装完成之后打开文件夹就是以下目录。 2.在cmd窗口输入node -v、npm -v查看版本检查是否安装成功 一般完成以…

总结JS中常用的数组的方法大全

总结JS中常用的数组方法 JS中常用的数组方法总结 数组(Array)是一种复杂的数据类型&#xff0c;它属于Object(对象)类型&#xff0c;用来将一组数组合在一起&#xff0c;通过一个变量就可以访问一组数据。在使用数组时&#xff0c;经常会搭配循环语句使用&#xff0c;从而很方便…

Vue3+TS+Vite+Element Plus搭建后台管理系统

Vue3TSViteElement Plus搭建后台管理系统1、简介2、效果图3、技术栈4、项目目录5、setting.js(全局配置文件)6、路由router7、状态管理stores8、下载地址总结1、简介 该示例是vue3、typescript、vite、element plus搭建前端管理框架&#xff0c;主要模块分为&#xff1a;菜单、…

用 vite 构建 vue3 + TS 项目实战

目录 1、项目初始化 2、eslint 基础配置 3、配置 git commit hook 4、在开发和构建中进行代码规范校验 5、GitCommit规范 6、 Vite中的TS环境说明 7、Vue3 中 Ts 支持 8、Vue3中的script-setup语法 9、script-setup中的编译宏 10、配置转换JSX和TSX 11、初始化…

vue2计算属性computed

1.什么是计算属性 概念&#xff1a; 1.计算属性是vue的一个特性&#xff0c;此属性有计算能力&#xff0c;也就相当于一个函数。可以将计算结果缓存&#xff0c;作为一个属性使用。 特点&#xff1a; 1.要在 methods: { } 或者 computed&#xff1a; { } 中 &#xff0c;以方…

基于SpringBoot的医疗管理系统(Java毕业设计)

【辰兮要努力】&#xff1a;hello你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行&#xff01; 博客来源于项目以及编程中遇到的问题总结&#xff0c;偶尔会有读书分享&#xff0c;我会陆续更新Java前端、后台、…

鲜花商城系统设计与实现(Java+Web+MySQL)

目 录 摘 要 I Abstract II 1 绪论 1 1.1 现状分析 1 1.2 研究意义 1 1.3 研究方法 1 2 系统的开发环境及技术简介 3 2.1 系统开发环境简介 3 2.2 系统开发技术简介 3 3 可行性研究 7 3.1 经济可行性 7 3.2 技术可行性 7 3.3 操作可行性 7 3.4 法律可行性 7 4 需求分析 9 4.1 …

vue+elementui中el-upload组件上传文件时,修改文件名,不用FormData

前言 今天在开发的时候&#xff0c;后端突然提了一个需求&#xff0c;因为特殊的文件上传不进文件服务器&#xff0c;所以后端问我能不能上传的时候给加个扩展名&#xff0c;本着只要逻辑没问题&#xff0c;都可以通过代码实现的理念&#xff0c;我说&#xff1a;“可以“”&a…

攻防世界WEB练习区(backup、cookie、disabled_button)

前言 作者简介&#xff1a;不知名白帽&#xff0c;网络安全学习者。 博客主页&#xff1a;https://blog.csdn.net/m0_63127854?typeblog 攻防世界专栏&#xff1a;https://blog.csdn.net/m0_63127854/category_11983747.html 网络安全交流社区&#xff1a;https://bbs.csdn.ne…

uniApp h5项目通过命令行打包,并生成指定路径、文件名称

需求&#xff1a;想要自动化部署uni项目&#xff0c;平常的uni项目是通过可视化构建&#xff0c;导致我们的自动部署成了半自动&#xff0c;非常不爽&#xff0c;于是就找到了下面这种方法 首先&#xff0c;用hb新建一个项目 然后&#xff0c;通过cli新建一个项目 文档 vue c…

禁止 input 自动填充

禁止 input 自动填充 在编写 Form 表单样式的时候&#xff0c;修改自动填充后的 input 样式是很麻烦甚至不可行的&#xff0c;而且还有一些不需要自动填充的场景。 浏览器根据保存数据时表单控件的 type 和 name 去匹配。 常用的就是 type 为 password&#xff0c;name 为 em…

Android 设置Padding和Margin(动态/静态)

一、什么是padding&#xff0c;什么是margin&#xff1f; 在Android界面开发时&#xff0c;为了布局更加合理好看&#xff0c;很多时候会用上Padding和Margin&#xff0c; padding和margin是什么呢&#xff1f;即内边距和外边距&#xff1b; 某个View指定为padding是针对该V…

vue制作一个好看的网页

1.安装并配置node.js (见本人博客-node.js) 2.建好的项目目录如下 build: 用来存放项目构建脚本 config: 存放项目的一些基本配置信息&#xff0c;最常用的就是端口转发 node_modules:这个目录存放项目的所有依赖&#xff0c;由npm install 下载来的文件 src:存放项目的源…

Vue设置浏览器小图标(ICON)

Vue设置浏览器小图标 当我们使用浏览器做开发时&#xff0c;我们能希望浏览器标签页能显示自己的logo小图标&#xff0c;这个是怎样设置的呢&#xff1f; 第一步&#xff1a;准备logo图片信息 找到自己的logo&#xff0c;通过图片在线转换格式&#xff0c;转换成32*32的ico为…

css关于文本溢出

处理思路 1&#xff09;给需要做溢出处理的文本元素设置width或者max-width 2&#xff09;超出部分省略 overflow:hidden 3) 文本溢出处理方式 text-overflow: ellipsis | clip | 自定义字符 如&#xff1a;“_” “.” 4) 设置文本不换行 white-space: nowrap 单行文本溢出 …

Rust开发WebAssembly在Html和Vue中的应用【后篇】

【建议先看】继上一篇【Rust开发WebAssembly在Html和Vue中的应用】遗留下来的问题 Rust开发WebAssembly在Html和Vue中的应用_一码超人的博客-CSDN博客 本文讲述Vue2与H5版uniapp如何引入rust webassembly的应用流程 在上一文中末尾&#xff0c;我说过vue2在引入胶水js后执行…

关于vue2与vue3

Vue组件之间通信方式有哪些 vue是组件化开发框架&#xff0c;所以对于vue应用来说组件间的数据通信非常重要。 1. 组件通信常用方式有以下8种: props $emit/$on $children/$parent $attrs/$listeners ref $root eventbus vuex 注意vue3中废弃的几个API 在vue3中废除$c…