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

先言：

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

实现：

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

比如我设置一个缓存有效期是一天，过期后控制台输出‘有效期已过’。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);}

也可以简单封装成给每个缓存的值都加个有效时间，有存储方法和读取方法：

/*** 设置时效缓存* key    存储的key值* value  存储的value值 (不填则默认为1)* time   有效时间，（单位：毫秒，不填则默认一天）*/
function setStorageSyncSecond(key, value, time) {value = value ? value : 1wx.setStorageSync(key, value)let t = time ? time : 86400000if (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总结笔记
…等等
进我主页看更多~

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

微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
【微信小程序系列：二】小程序常用功能：跳转地图、扫一扫、人脸识别、拍照、拨打电话、调整屏幕亮度、文字可复制、监听截屏...
一.先言: (-￣▽￣)-,hello,微信小程序系列第二篇,介绍下小程序里的前端常用功能api,可以快速copy使用~ 二.文字可复制: 小程序页面里的文字默认是没有长按复制功能的,需要套个标签来实 ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现摘要本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
【微信小程序系列】微信小程序连接后端数据库（SSM）案例
[微信小程序系列]微信小程序连接后端数据库(SSM)案例登录页面 login.wxml <view class="page"><loading hidden=& ...
微信小程序——个人相册（前端）
微信小程序--个人相册(前端) 项目效果图 1.项目功能 1)用户管理,信息包括:头像.昵称,功能包括:获取微信用户信息.验证用户是否存在.修改头像.修改昵称 2)上传相片:上传图片 3)照册列表:封 ...
微信小程序本地mysql_微信小程序系列之使用缓存在本地模拟服务器数据库
微信小程序系列之使用缓存在本地模拟服务器数据库现在将data.js这个文件视作是本地数据库的初始化数据,要做的第一件事就是讲这些初始化数据装进缓存中,以形成数据库的初始化数据整个应用程序的生命周期 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
[小记] 微信小程序 - 人脸识别前端（一）初体验
微信小程序 - 人脸识别前端(一)初体验记录尝试使用拍照模式进行人脸比对的过程-此方式有一定缺陷:调用系统摄像头,会保留照片于系统相册等功能:人脸识别 + 打卡签到说明:前端仅做拍照和转码操作等 ...

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

先言：

实现：

结语：

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

最新文章

热门文章