一、背景

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出柳林免費(fèi)做網(wǎng)站回饋大家。

業(yè)務(wù)需要在前端進(jìn)行數(shù)據(jù)的緩存，到期就刪除再進(jìn)行獲取新數(shù)據(jù)。

二、實(shí)現(xiàn)過(guò)程

前端設(shè)置數(shù)據(jù)定時(shí)失效的可以有下面2種方法：

1、當(dāng)數(shù)據(jù)較大時(shí)，可以利用localstorage，存數(shù)據(jù)時(shí)候?qū)懭胍粋€(gè)時(shí)間，獲取的時(shí)候再與當(dāng)前時(shí)間進(jìn)行比較
2、如果數(shù)據(jù)不超過(guò)cookie的限制大小，可以利用cookie比較方便，直接設(shè)置有效期即可。
3、更多（請(qǐng)大神指點(diǎn)）

利用localstorage實(shí)現(xiàn)

localstorage實(shí)現(xiàn)思路：

1、存儲(chǔ)數(shù)據(jù)時(shí)加上時(shí)間戳

在項(xiàng)目開(kāi)發(fā)中，我們可以寫(xiě)一個(gè)公用的方法來(lái)進(jìn)行存儲(chǔ)的時(shí)候加上時(shí)間戳

export function setLocalStorageAndTime (key, value) {
 window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
}

項(xiàng)目中應(yīng)用

存儲(chǔ)

 // 有數(shù)據(jù)再進(jìn)行存儲(chǔ)
   setLocalStorageAndTime('XXX', {name: 'XXX'})

讀取

// 判斷是否返回為null或者失效
getLocalStorageAndTime('XXX', 86400000)

2、獲取數(shù)據(jù)時(shí)與當(dāng)前時(shí)間進(jìn)行比較

export function getLocalStorageAndTime (key, exp = 86400000) {
 // 獲取數(shù)據(jù)
 let data = window.localStorage.getItem(key)
 if (!data) return null
 let dataObj = JSON.parse(data)
 // 與過(guò)期時(shí)間比較
 if (new Date().getTime() - dataObj.time > exp) {
  // 過(guò)期刪除返回null
  removeLocalStorage(key)
  console.log('信息已過(guò)期')
  return null
 } else {
  return dataObj.data
 }
}

利用cookie實(shí)現(xiàn)

我們用js-cookie這款插件來(lái)設(shè)置cookie，比較方便，可以自行查看文檔。

js-cookie 的示例中只有以天為單位的有效期：

Cookies.set('name', 'value', { expires: 7 }); // 7 天后失效

官方文檔只要設(shè)置天數(shù)，沒(méi)有時(shí)分秒，這樣我們想設(shè)置更小單位的時(shí)候無(wú)法下手，其實(shí)也可以設(shè)置時(shí)間戳來(lái)處理時(shí)間的，下面這種方式可以設(shè)置任意單位的有效期：

let seconds = 10;
let expires = new Date(new Date() * 1 + seconds * 1000);
Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效

貼上利用js-cookie的封裝, 記得 npm i js-cookie

import Cookies from 'js-cookie'

/*
* 設(shè)置cookies
* */
export function getCookies (key) {
 return Cookies.get(key)
}
/*
* 設(shè)置Cookies
* */
export function setCookies (key, value, expiresTime) {
 let seconds = expiresTime
 let expires = new Date(new Date() * 1 + seconds * 1000)
 return Cookies.set(key, value, { expires: expires })
}
/*
* 移除Cookies
* */
export function removeCookies (key) {
 return Cookies.remove(key)
}

三、總結(jié)

上面兩個(gè)方法各有各的優(yōu)點(diǎn)和缺點(diǎn)，如果小伙伴們有更好方法，麻煩留言互相學(xué)習(xí)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。