溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

利用js-cookie實(shí)現(xiàn)前端設(shè)置緩存數(shù)據(jù)定時(shí)失效

發(fā)布時(shí)間:2020-10-22 11:23:23 來源:腳本之家 閱讀:225 作者:bayi_lzp 欄目:web開發(fā)

一、背景

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

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

前端設(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ù)不超過cookie的限制大小,可以利用cookie比較方便,直接設(shè)置有效期即可。
3、更多(請(qǐng)大神指點(diǎn))

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

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

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

在項(xiàng)目開發(fā)中,我們可以寫一個(gè)公用的方法來進(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)
 // 與過期時(shí)間比較
 if (new Date().getTime() - dataObj.time > exp) {
  // 過期刪除返回null
  removeLocalStorage(key)
  console.log('信息已過期')
  return null
 } else {
  return dataObj.data
 }
}

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

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

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

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

官方文檔只要設(shè)置天數(shù),沒有時(shí)分秒,這樣我們想設(shè)置更小單位的時(shí)候無法下手,其實(shí)也可以設(shè)置時(shí)間戳來處理時(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í)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI