微信小程序前端用什么（【微信小程序系列：四】前端利用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 : 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总结笔记

…等等

进我主页看更多~