一、前言
第一次发现简述还能写markdown呢，简直是打开了新世界的大门，再也不用截图了！这两天在封装登陆模块，想要在前端存储 access_token。以前都是存 cookie 里，突然想用用localStorage，但是单纯使用 localStorage 又没法直接设置 access_token 的失效时间。
二、封装父类 Storag
class Storage {
constructor() {
this.writeTime = Number(new Date()); // 写入时间
}
isNotExist(value) {
return value === null || typeof(value) === 'undefined';
}
}
三、封装子类 LocalStorage
class LocalStorage {
/**
* set 方法，设置
* @param key String 键
* @param value 值
* @param expired writeTime 写入时间，单位：ms
*/
set (key, value, expired) {
let data = {
value
writeTime: this.writeTime, // 写入时间，继承自 Stroage
expired
};
// 值是数组，不能直接存储，需要转换 JSON.stringify
localStorage.setItem(key, JSON.stringify(data));
}
/**
* get 方法，获取
* @param key 键
*/
get () {
const dataJSON = localStorage.getItem(key);
// 当目标不存在时直接结束
if (this.isNotExist(dataJSON)) {
return null;
}
let data = JSON.parse(dataJSON);
// 当数据的存在周期未定义时，它被认为是永久的
if (this.isNotExist(data.expired)) {
return data.value;
}
// 数据声明期结束时释放数据
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，有效时间为 5 分钟
localstorage.set('access_token', 'test', 1000 * 60 * 5);
// 获取 access_token
localstorage.get('access_token'); // test
// 删除 access_token
localstorage.del('access_token');
五、结语
这样就实现了为 localstorage 添加了有效时间。网上还有一种方法，不直接删除过期的 localstorage 值，而是为它的 key 值加 expired 前缀，原理一样同学们仁者见仁，个人这边暂时没有需求，因此没有使用这种方法。
希望这篇文章能够帮助同学们成功爬坑，如果对您有所帮助，请关注、点赞并收藏，有其他问题也可以留言或私信，欢迎讨论！
