先言:

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

实现:

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

  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总结笔记
…等等
进我主页看更多~