這篇文章將為大家詳細(xì)講解有關(guān)如何使用localStorage 設(shè)置過(guò)期時(shí)間，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括揚(yáng)州網(wǎng)站建設(shè)、揚(yáng)州網(wǎng)站制作、揚(yáng)州網(wǎng)頁(yè)制作以及揚(yáng)州網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，揚(yáng)州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到揚(yáng)州省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

localStorage除非人為手動(dòng)清除，否則會(huì)一直存放在瀏覽器中，但是很多情況下我們可能需要localStorage有一個(gè)過(guò)期時(shí)間，比如我們將用戶身份認(rèn)證 token 保存在客戶端，1周之內(nèi)有效，超過(guò)一周則要重新登錄，那么這種需求該怎么實(shí)現(xiàn)呢

要知道，localStorage本身并沒(méi)有提供過(guò)期機(jī)制，既然如此，那就只能我們自己來(lái)實(shí)現(xiàn)了，我們可以直接給其原型上加上這樣一個(gè)方法

Storage.prototype.setExpire=(key,value,expire) =>{
 };
Storage.setExpire(key,value,expire);

要過(guò)期就必須要記錄時(shí)間，我們的思路是，設(shè)置值得時(shí)候就將當(dāng)前時(shí)間記錄進(jìn)去，然后獲取值得時(shí)候判斷一下當(dāng)前時(shí)間和之前的時(shí)間差是否在某個(gè)范圍之內(nèi)，若果超出范圍，則清空當(dāng)前項(xiàng)，并返回null

要將時(shí)間加入到值中就必須要定義一個(gè)格式

Storage.prototype.setExpire=(key, value, expire) =>{
    let obj={
        data:value,
        time:Date.now(),
        expire:expire
    };
    localStorage.setItem(key,JSON.stringify(obj));
}

包括下面3個(gè)字段

• data 實(shí)際的值

• time 當(dāng)前時(shí)間戳

• expire 過(guò)期時(shí)間

因?yàn)閘ocalStorage 設(shè)置的值不能為對(duì)象， 所以這里使用了 JSON.stringify 方法將其轉(zhuǎn)為字符串，最終在使用的時(shí)候得轉(zhuǎn)回來(lái)。

接著我們添加一個(gè)獲取的方法

Storage.prototype.getExpire= key =>{
    let val =localStorage.getItem(key);
    if(!val){
        return val;
    }
    val =JSON.parse(val);
    if(Date.now()-val.time>val.expire){
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

我們可以先測(cè)試一下

localStorage.setExpire("token",'xxxxxx',5000);
window.setInterval(()=>{
    console.log(localStorage.getExpire("token"));
},1000)

關(guān)于如何使用localStorage 設(shè)置過(guò)期時(shí)間就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。