localStorage 設定過期時間的方法實現

2022-09-21 03:06:11 字數 1052 閱讀 2558

localstorage除非人為手動清除,否則會一直存放在瀏覽器中,但是很多情況下我們可能需要localstorage有乙個過期時間,比如我們將使用者身份認證 token 儲存在客戶端,1周之內有效,超過一周則要重新登入,那麼這種需求該怎麼實現呢

要知道,localstorage本身並沒有提供過期機制,既然如此,那就只能我們自己來實現了,我們可以直接給其原型上加上這樣乙個方法

storage.prototype.setexpire=(key,value,expire) =>;

storage.setexpire(key,value,expire);

要過期就必須要記錄時間,我們的思路是,設定值得時候就將當前時間記錄進去,然後獲取值得時候判斷一下當前時間和之前的時間差是否在某個範圍之內,若果超出範圍,則清空當前項,並返回null

要將時間加入到值中就必須要定義乙個格式

storage.prototype.setexpire=(key, value, expire) =>;

localstorage.setitem(key,jso程式設計客棧n.stringify(obj));

}包括下面3個字段

因為localstorage 設定的值不能為物件, 所以這裡使用了 json.stringify 方法將其轉為字串,最終在使用的時候得轉回來。

接著我們新增乙個獲取的方法

storaguwhnme.prototype.getexpire= key =>

val =json.paruwhnmse(val);

if(date.now()-val.time>val.expire)

return val.data;

}我們可以先測試一下

localstorage.setexpire("token",'******',5000);

window.setinterval(()=>,1000)

本質上我們的思路並非是要定時去清理過期的項,而是在獲取的時候判斷是否過期,如果過期再去清除該項。

本文標題: localstorage 設定過期時間的方法實現

本文位址: /web/html5/208621.html

localStorage時效設定

css box contentk contentk div contentk input contentk input webkit input placeholder aging aging div nth child 2 label btn,btn1 html class box class c...

獲取和設定localStorage

東鈿金融服務平台 使用者第一次訪問頁面出現,引導步驟,起初一直使用cookie,但是cookie一直不穩定 簡單介紹和使用了localstorage 在我的頁面上就只是用了 獲取localstorage,和設定localstorage。思路和邏輯 和cookie是一樣的,如下 var a local...

localStorage設定過期時間

劃重點 sessionstorage不能跨tab頁 設定過期時間在原有的原生api基礎上封裝,存在key的過期資料 眾所周知,前端三大快取,cookie,sessionstorage,localstorage,cookie空間太小,一旦大了,會消耗流量,只適合存一些登入會話資訊,而sessionst...