小程序中设置缓存过期的实现方法


Posted in Javascript onJanuary 14, 2020

需求是两张图片在这个时间段内交替显示,当天只弹一次图片。

后端返回的数据格式:

{
  "start": "2019/10/08 00:00:00",
  "end": "2019/10/30 23:59:59",
  "ads": [
    {
      "image": "xxxx",
      "uri": "wechat:zhizhuxy666"
    },
    {
      "image": "xxx",
      "uri": "wechat:zhizhuxy666"
    }
  ]
}

小程序中缓存没有过期时间,也就是说存储进去的缓存要自己手动清除,那么如何保证两张图片能够交替显示呢?

需求分析

  1. 一天只弹一次广告
  2. 图片轮流显示
  3. 只在时间范围内显示

这里有个关键是,如何知道时间有没有到第二天?

思路

需要用到两个缓存:

  1. showAdvert:用于检测弹窗时间是否在有效期内
  2. showAdvert${currentDay}:用于检测当天是否弹过弹窗

为什么要用到两个?

因为这里有两个状态检测:一个是否在有效期内,一个是当天是否弹过弹窗。

如何判断时间有没有到第二天?

将所有天数的时间戳加上一天保存起来(ps:这个方法很蠢)。然后每次进入小程序都获取下当前的时间,对比下当天的时间是否大于保存的时间戳。如果超过就说明已经到了第二天。

为什么要加上一天?

因为后端返的开始时间是当天的凌晨,而真正要过完这一天是24点之后。一天的毫秒数:24 * 60 * 60 * 1000。

代码实现

变量的声明

声明需要使用的时间戳

const startTempStamp = new Date(item.start).getTime()    
const endTempStamp = new Date(item.end).getTime()
const oneDayTempStamp = 24 * 60 * 60 * 1000   // 一天的时间戳
const now = (new Date('2019/09/28 00:00:01')).getTime()

声明需要一共多少天,以及当天是第几天;这里使用Math.ceil()向上取整

const allDay = Math.ceil((endTempStamp - startTempStamp) / oneDayTempStamp)
const currentDay = Math.ceil((now - startTempStamp) / oneDayTempStamp)

判断当前时间是否在时间有效期内内,如果在时间有效期内,就弹弹窗,如果不在就不弹

if (now > startTempStamp && now < endTempStamp) {
  ... //下面弹窗逻辑的实现
}else {
  this.setData!({showAdvert: false})
  wx.setStorageSync('showAdvert', false) 
}

接下来开始写弹出弹窗的逻辑。

弹窗逻辑的实现

首先判断当天的时间戳是否大于前一天的时间戳,如果大于就说明到第二天了,如果小于说明今天还没有过去。

然后清除前一天的缓存

const table = []
for (let i = 1; i <= allDay; i++) {
  table.push(startTempStamp + oneDayTempStamp * i)
}
if (now > table[currentDay - 2]) {
  wx.removeStorageSync(`showAdvert${table[currentDay - 2]}`)
}

图片交替显示

let n = 0
if (currentDay % item.ads.length === 0) {
  n = 1
} else if (currentDay % item.ads.length === 1) {
  n = 0
}

检查当天广告是否弹出过

const advert = wx.getStorageSync(`showAdvert${table[currentDay - 1]}`) || false    
if (!advert) {
  this.setData!({showAdvert: true})
  wx.setStorageSync('showAdvert', true)
}

弹出广告,并设置缓存

const timeStamp = Math.floor(new Date().getTime() / 10000).toString()
this.setData!({
  advertLink: item.ads[n].image + `?timeStamp=${timeStamp}`,
  copyWechat: item.ads[n].uri,
}, () => {
  wx.setStorageSync(`showAdvert${table[currentDay - 1]}`, true)
})

一进入页面读下本地缓存,是否要弹出弹窗。

onShow(){
  const showAdvert = wx.getStorageSync('showAdvert')
  this.setData!({showAdvert})
}

总结

这里最大的问题是如何判断当前的时间有没有过24点,自己一直没有想到比较好的解决方法,限于自己的水平,没有更好的方案,这里我只是记录下实现的过程,不喜勿喷,如果有更好的方案,欢迎指点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
ES6实现图片切换特效代码
Jan 14 #Javascript
vue项目创建步骤及路由router
Jan 14 #Javascript
JS实现容器模块左右拖动效果
Jan 14 #Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 #Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 #Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 #Javascript
js实现列表向上无限滚动
Jan 13 #Javascript
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
mpvue 单文件页面配置详解
2018/12/02 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python实现元素等待代码实例
2019/11/11 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
入党自我鉴定范文
2013/10/04 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
出国导师推荐信
2014/01/16 职场文书
小学生考试获奖感言
2014/01/30 职场文书
自立自强的名人事例
2014/02/10 职场文书
会计岗位职责模板
2014/03/12 职场文书
服务质量承诺书
2014/03/27 职场文书
目标责任书范本
2014/04/16 职场文书
员工保密协议书
2014/09/27 职场文书
餐馆开业致辞
2015/08/01 职场文书
感恩老师主题班会
2015/08/12 职场文书