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


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 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
JS实现的几个常用算法
Nov 12 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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
swfupload 多文件上传实现代码
2008/08/27 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
动态加载iframe
2006/06/16 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
Python爬取读者并制作成PDF
2015/03/10 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Python安装selenium包详细过程
2019/07/23 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
导购员的岗位职责
2014/02/08 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
复活读书笔记
2015/06/29 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android