让localStorage支持过期时间设置
聊到 localStorage
想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem
, setItem
, removeItem
, clear
这几个 API
轻松的对存储在浏览器本地的数据进行**「读,写, 删」操作, 但是相比于 cookie
, localStorage
唯一美中不足的就是「不能设置每一个键的过期时间」**。
我们还应注意,localStorage
中的键值对总是以字符串的形式存储。
初级解法
localStorage.setItem('dooring', '1.0.0')
// 设置一小时的有效期
const expire = 1000 * 60 * 60;
setTimeout(() => {
localStorage.setItem('dooring', '')
}, expire)
当然这种方案能解决一时的问题, 但是如果要设置任意键的有效期, 使用这种方案就需要编写多个定时器, 「维护成本极高, 且不利于工程化复用」
中级解法
- 用**「localStorage」**存一份{key(键): expire(过期时间)}的映射表
- 重写**「localStorage API」**, 对方法进行二次封装
const store = {
// 存储过期时间映射
setExpireMap: (key, expire) => {
//获取已经存储的映射,如果没有就创建一个新的映射对象'{}'
const expireMap = localStorage.getItem('EXPIRE_MAP') || "{}"
localStorage.setItem(
'EXPIRE_MAP',
JSON.stringify({
...JSON.parse(expireMap),//将json转化为对象,并利用扩展符展开
key: expire //为新存储的映射存一个key值,作为过期时间
}))
},
//对LocalStorage API中的setItem进行优化重写
setItem: (key, value, expire) => {
//先调用自身的方法设置过期时间
store.setExpireMap(key, expire)
//直接存储需要存储的值
localStorage.setItem(key, value)
},
//对LocalStorage API中的getItem进行优化重写
getItem: (key) => {
// 在取值之前先判断是否过期
const expireMap = JSON.parse(
localStorage.getItem('EXPIRE_MAP') || "{}" //得到的是json
)//将json转为对象
if(expireMap[key] && expireMap[key] < Date.now()) {
//若映射中key存在,且没有到达过期的时间,直接返回想要的值
return localStorage.getItem(key)
}else {
//如果过期了删除要删除的存储值即可
localStorage.removeItem(key)
return null
}
}
// ...
}
眨眼一看这个方案确实解决了复用性的问题, 并且不同团队都可以使用这个方案, 但仍然有一些缺点:
- 对
store
操作时需要维护2份数据, 并且占用缓存空间 - 如果
EXPIRE_MAP
误删除将会导致所有过期时间失效 - 对操作过程缺少更灵活的控制(比如操作状态, 操作回调等)
高级解法
为了减少维护成本和空间占用, 并支持一定的灵活控制和容错能力, 我们又应该怎么做呢?
- 将过期时间存到
key
中, 如 dooring|6000, 每次取值时通过分隔符“|”来将key
和expire
取出, 进行判断 - 将过期时间存到
value
中, 如 1.0.0|6000, 剩下的同1
为了更具有封装性和可靠性, 我们还可以配置不同状态下的回调, 简单实现如下:
const store = {
preId: 'xi-',
timeSign: '|-door-|',
status: {
SUCCESS: 0,
FAILURE: 1,
OVERFLOW: 2,
TIMEOUT: 3,
},
storage: localStorage || window.localStorage,
getKey: function (key: string) {
return this.preId + key;
},
set: function (
key: string,
value: string | number,
time?: Date & number,
cb?: (status: number, key: string, value: string | number) => void,
) {
let _status = this.status.SUCCESS,
_key = this.getKey(key),
_time;
// 设置失效时间,未设置时间默认为一个月
try {
_time = time
? new Date(time).getTime() || time.getTime()
: new Date().getTime() + 1000 * 60 * 60 * 24 * 31;
} catch (e) {
_time = new Date().getTime() + 1000 * 60 * 60 * 24 * 31;
}
try {
this.storage.setItem(_key, _time + this.timeSign + value);
} catch (e) {
_status = this.status.OVERFLOW;
}
cb && cb.call(this, _status, _key, value);
},
get: function (
key: string,
cb?: (status: number, value: string | number | null) => void,
) {
let status = this.status.SUCCESS,
_key = this.getKey(key),
value = null,
timeSignLen = this.timeSign.length,
that = this,
index,
time,
result;
try {
value = that.storage.getItem(_key);
} catch (e) {
result = {
status: that.status.FAILURE,
value: null,
};
cb && cb.call(this, result.status, result.value);
return result;
}
if (value) {
index = value.indexOf(that.timeSign);
time = +value.slice(0, index);
if (time > new Date().getTime() || time == 0) {
value = value.slice(index + timeSignLen);
} else {
(value = null), (status = that.status.TIMEOUT);
that.remove(_key);
}
} else {
status = that.status.FAILURE;
}
result = {
status: status,
value: value,
};
cb && cb.call(this, result.status, result.value);
return result;
},
// ...
};
export default store;