脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序 缓存过期

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

 更新时间：2020年01月14日 09:27:52   作者：前端学习笔记  
这篇文章主要介绍了小程序中设置缓存过期的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

后端返回的数据格式：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 微信小程序实现多张图片上传功能

    微信小程序实现多张图片上传功能

    这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • IE事件对象（The Internet Explorer Event Object）

    IE事件对象（The Internet Explorer Event Object）

    不同于DOM事件对象，基于Event Handler授权这种方式，IE事件对象可以用不同的方式进行访问。当一个事件Handler通过DOM 0 级的方式被授权，则这个事件对象将作为window对象的属性而存在
    2012-06-06
  • javascript简单实现命名空间效果

    javascript简单实现命名空间效果

    这篇文章主要介绍了javascript简单的实现命名空间效果的方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • 一起来学习JavaScript的BOM操作

    一起来学习JavaScript的BOM操作

    这篇文章主要为大家详细介绍了JavaScript BOM操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • JS 日期验证正则附asp日期格式化函数

    JS 日期验证正则附asp日期格式化函数

    JS 日期验证正则 asp日期格式化函数，大家以后的日期就是能通过验证的了。
    2009-09-09
  • ES6中Math对象新增的方法实例详解

    ES6中Math对象新增的方法实例详解

    这篇文章主要介绍了ES6中Math对象新增的方法,结合实例形式详细分析了ES6中Math对象的各种常用数学函数与新增方法相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript模板入门介绍

    JavaScript模板入门介绍

    我最开始写过一个富交互的页面，其中的JavaScript代码包含了很多html标签
    2012-09-09
  • 微信小程序实现全局状态管理的方法整理

    微信小程序实现全局状态管理的方法整理

    已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下
    2023-06-06
  • JavaScript实现简单图片翻转的方法

    JavaScript实现简单图片翻转的方法

    这篇文章主要介绍了JavaScript实现简单图片翻转的方法,涉及javascript操作图片与数组的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 微信小程序访问mysql数据库流程详解

    微信小程序访问mysql数据库流程详解

    日常我们在开发小程序的时候，总是希望把数据提交回数据库进行存储，那在小程序中该如何访问数据库呢？本篇我们就介绍一下具体的思路
    2022-08-08

最新评论