小程序中设置缓存过时

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

后端返回的数据格式：

{
    "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点，本身一直没有想到比较好的解决方法，限于本身的水平，没有更好的方案，这里我只是记录下实现的过程，不喜勿喷，若是有更好的方案，欢迎指点。

另外可添加微信ttxbg180218交流