小程序中怎么設(shè)置緩存過期

這篇文章將為大家詳細講解有關(guān)小程序中怎么設(shè)置緩存過期，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

需求是兩張圖片在這個時間段內(nèi)交替顯示，當(dāng)天只彈一次圖片。

后端返回的數(shù)據(jù)格式：

{  "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. 一天只彈一次廣告圖片輪流顯示只在時間范圍內(nèi)顯示

這里有個關(guān)鍵是，如何知道時間有沒有到第二天？

思路

需要用到兩個緩存：

1. showAdvert：用于檢測彈窗時間是否在有效期內(nèi)showAdvert${currentDay}：用于檢測當(dāng)天是否彈過彈窗

為什么要用到兩個？

因為這里有兩個狀態(tài)檢測：一個是否在有效期內(nèi)，一個是當(dāng)天是否彈過彈窗。

如何判斷時間有沒有到第二天？

將所有天數(shù)的時間戳加上一天保存起來（ps：這個方法很蠢）。然后每次進入小程序都獲取下當(dāng)前的時間，對比下當(dāng)天的時間是否大于保存的時間戳。如果超過就說明已經(jīng)到了第二天。

為什么要加上一天？

因為后端返的開始時間是當(dāng)天的凌晨，而真正要過完這一天是24點之后。一天的毫秒數(shù)：24 * 60 * 60 * 1000。

代碼實現(xiàn)

變量的聲明

聲明需要使用的時間戳

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()

聲明需要一共多少天，以及當(dāng)天是第幾天；這里使用Math.ceil()向上取整

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

判斷當(dāng)前時間是否在時間有效期內(nèi)內(nèi)，如果在時間有效期內(nèi)，就彈彈窗，如果不在就不彈

if (now > startTempStamp && now < endTempStamp) {  ... //下面彈窗邏輯的實現(xiàn)}else {  this.setData!({showAdvert: false})  wx.setStorageSync('showAdvert', false)}

接下來開始寫彈出彈窗的邏輯。

彈窗邏輯的實現(xiàn)

首先判斷當(dāng)天的時間戳是否大于前一天的時間戳，如果大于就說明到第二天了，如果小于說明今天還沒有過去。

然后清除前一天的緩存

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 = 0if (currentDay % item.ads.length === 0) {  n = 1} else if (currentDay % item.ads.length === 1) {  n = 0}

檢查當(dāng)天廣告是否彈出過

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

彈出廣告，并設(shè)置緩存

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})}

關(guān)于小程序中怎么設(shè)置緩存過期就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。