一幌衣、前言
第一次發(fā)現(xiàn)簡述還能寫markdown呢，簡直是打開了新世界的大門壤玫，再也不用截圖了豁护！這兩天在封裝登陸模塊，想要在前端存儲 access_token欲间。以前都是存 cookie 里楚里，突然想用用localStorage，但是單純使用 localStorage 又沒法直接設(shè)置 access_token 的失效時(shí)間括改。
二腻豌、封裝父類 Storag
class Storage {
constructor() {
this.writeTime = Number(new Date()); // 寫入時(shí)間
}
isNotExist(value) {
return value === null || typeof(value) === 'undefined';
}
}
三、封裝子類 LocalStorage
class LocalStorage {
/**
* set 方法嘱能，設(shè)置
* @param key String 鍵
* @param value 值
* @param expired writeTime 寫入時(shí)間吝梅，單位：ms
*/
set (key, value, expired) {
let data = {
value
writeTime: this.writeTime, // 寫入時(shí)間，繼承自 Stroage
expired
};
// 值是數(shù)組惹骂，不能直接存儲苏携，需要轉(zhuǎn)換 JSON.stringify
localStorage.setItem(key, JSON.stringify(data));
}
/**
* get 方法，獲取
* @param key 鍵
*/
get () {
const dataJSON = localStorage.getItem(key);
// 當(dāng)目標(biāo)不存在時(shí)直接結(jié)束
if (this.isNotExist(dataJSON)) {
return null;
}
let data = JSON.parse(dataJSON);
// 當(dāng)數(shù)據(jù)的存在周期未定義時(shí)对粪，它被認(rèn)為是永久的
if (this.isNotExist(data.expired)) {
return data.value;
}
// 數(shù)據(jù)聲明期結(jié)束時(shí)釋放數(shù)據(jù)
if (this.isOutPeriod(data)) {
this.del(key);
return null;
}
return data.value;
}
/**
* del 方法右冻，刪除
* @param key 鍵
*/
del (key) {
localStorage.removeItem(key);
}
/**
* isOutPeriod 方法，判斷 value 值是否過期
* @param value 值
*/
isOutPeriod (value) {
if (!value.value) {
return true;
}
let readTime = Number(new Date());
return (readTime - value.writeTime) > value.expired;
}
}
四著拭、使用
1纱扭、storage.js
export const localstorage = new LocalStorage();
2、utils.js
import { localstorage } from './storage';
expoert { localstorage };
3儡遮、引入
import { localstorage } from 'yourPath/utils';
4乳蛾、test
// 存儲 access_token，有效時(shí)間為 5 分鐘
localstorage.set('access_token', 'test', 1000 * 60 * 5);
// 獲取 access_token
localstorage.get('access_token'); // test
// 刪除 access_token
localstorage.del('access_token');
五、結(jié)語
這樣就實(shí)現(xiàn)了為 localstorage 添加了有效時(shí)間肃叶。網(wǎng)上還有一種方法蹂随，不直接刪除過期的 localstorage 值，而是為它的 key 值加 expired 前綴因惭，原理一樣同學(xué)們?nèi)收咭娙试浪瑐€(gè)人這邊暫時(shí)沒有需求，因此沒有使用這種方法蹦魔。
希望這篇文章能夠幫助同學(xué)們成功爬坑激率，如果對您有所幫助，請關(guān)注勿决、點(diǎn)贊并收藏柱搜，有其他問題也可以留言或私信，歡迎討論剥险！
