localStorage 設定過期時間
阿新 • • 發佈:2018-11-26
localStorage除非人為手動清除,否則會一直存放在瀏覽器中,但是很多情況下我們可能需要localStorage有一個過期時間,比如我們將使用者身份認證 token 儲存在客戶端,1周之內有效,超過一週則要重新登入,那麼這種需求該怎麼實現呢
要知道,localStorage本身並沒有提供過期機制,既然如此,那就只能我們自己來實現了,我們可以直接給其原型上加上這樣一個方法
Storage.prototype.setExpire=(key,value,expire) =>{
};
Storage.setExpire(key,value,expire);
要過期就必須要記錄時間,我們的思路是,設定值得時候就將當前時間記錄進去,然後獲取值得時候判斷一下當前時間和之前的時間差是否在某個範圍之內,若果超出範圍,則清空當前項,並返回null
要將時間加入到值中就必須要定義一個格式
Storage.prototype.setExpire=(key, value, expire) =>{
let obj={
data:value,
time:Date.now(),
expire:expire
};
localStorage.setItem(key,JSON.stringify(obj));
}
包括下面3個欄位
data 實際的值
time 當前時間戳
expire 過期時間
因為localStorage 設定的值不能為物件, 所以這裡使用了 JSON.stringify 方法將其轉為字串,最終在使用的時候得轉回來。
接著我們新增一個獲取的方法
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;
}
我們可以先測試一下
localStorage.setExpire("token",'xxxxxx',5000);
window.setInterval(()=>{
console.log(localStorage.getExpire("token"));
},1000)
本質上我們的思路並非是要定時去清理過期的項,而是在獲取的時候判斷是否過期,如果過期再去清除該項。