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

先言：

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

实现：

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

1. 比如我设置一个缓存有效期是一天，过期后控制台输出‘有效期已过’。1秒等于1000毫秒，86400000毫秒是一天。

let applyTime = wx.getStorageSync("time");// 获取时间缓存// 先判断存不存在此缓存，如果存在if(applyTime){// 当前时间大于有效期if(newDate().getTime()> applyTime){// 设置一天有效期新缓存
              wx.setStorageSync("time",newDate().getTime()+86400000);//有效期已过，在这执行某些操作
              console.log('有效期已过')}}else{// 如果不存在，直接设置一天有效期新缓存
          wx.setStorageSync("time",newDate().getTime()+604800000);}

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

/**
 * 设置时效缓存
 * key    存储的key值
 * value  存储的value值 (不填则默认为1)
 * time   有效时间，（单位：毫秒，不填则默认一天）
 */functionsetStorageSyncSecond(key, value, time){
  value = value ? value :1
  wx.setStorageSync(key, value)let t = time ? time :86400000if(t >0){ 
    wx.setStorageSync(key +'dtime', t +newDate().getTime())}else{
    wx.removeStorageSync(key)}}/**
 * 读取时效缓存
 *  key  存储的key值
 * return 返回有值则有效期未过，返回false或者undefined证明有效期过了、或者该值已不存在
 */functiongetStorageSyncTime(key){var deadtime = wx.getStorageSync(key +'dtime')if(deadtime){if(deadtime <newDate().getTime()){
      wx.removeStorageSync(key)
      wx.removeStorageSync(key +'dtime')returnfalse}else{return wx.getStorageSync(key)}}else{returnfalse}}

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

结语：

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

最近在玩巫师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总结笔记
…等等
进我主页看更多~