脚本宝典收集整理的这篇文章主要介绍了localStorage过期时间设置的几种方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getITem, setItem, removeitem, clear 这几个 API 轻松的对存储在浏览器本地的数据进行**「读,写, 删」操作, 但是相比于 cookie, localStorage 唯一美中不足的就是「不能设置每一个键的过期时间」**。
localStorage 属性允许我们访问一个 Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。 localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。
我们还应注意，localStorage 中的键值对总是以字符串的形式存储。
在实际的应用场景中, 我们往往需要让 localStorage 设置的某个 「key」 能在指定时间内自动失效, 所以基于这种场景, 我们如何去解决呢?
对于刚熟悉前端的朋友, 可能会立马给出答案:
localStorage.setItem('dooring', '1.0.0')
// 设置一小时的有效期
const expire = 1000 * 60 * 60;
setTimeout(() => {
localStorage.setItem('dooring', '')
}, expire)
当然这种方案能解决一时的问题, 但是如果要设置任意键的有效期, 使用这种方案就需要编写多个定时器, 「维护成本极高, 且不利于工程化复用」。
前端工程师在有一定的工作经验之后, 往往会去考虑工程化和复用性的问题, 并对数据结构有了一定的了解, 所以可能会有接下来的解法:
类似的代码如下:
const Store = { // 存储过期时间映射 setExpireMap: (key, expire) => { const expireMap = localStorage.getItem('EXPIRE_MAP') || "{}" localStorage.setItem( 'EXPIRE_MAP', JSON.stringify({ ...JSON.parse(expireMap), key: expire })) }, setItem: (key, value, expire) => { store.setExpireMap(key, expire) localStorage.setItem(key, value) }, getItem: (key) => { // 在取值之前先判断是否过期 const expireMap = JSON.parse( localStorage.getItem('EXPIRE_MAP') || "{}" ) if(expireMap[key] && expireMap[key] < Date.now()) { return localStorage.getItem(key) }else { localStorage.removeItem(key) return null } } // ... }
眨眼一看这个方案确实解决了复用性的问题, 并且不同团队都可以使用这个方案, 但仍然有一些缺点:
为了减少维护成本和空间占用, 并支持一定的灵活控制和容错能力, 我们又应该怎么做呢?
这里笔者想到了两种类似的方案:
为了更具有封装性和可靠性, 我们还可以配置不同状态下的回调, 简单实现如下:
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;
这样, 我们就实现了每个 key 都有独立的过期时间, 并且对不同的操作结果可以轻松的进行状态管控啦~
当然, 骨灰级解法是直接使用 xijs 这个 javascript 工具库, 因为我已经将上述完整实现方案封装到该库中了, 我们只需要使用如下的方案, 就能轻松使用具有过期时间的强大的 「localStorage」 方法啦 :
// 先安装 yarn add xijs
import { store } From 'xijs';
// 设置带有过期时间的key
store.set('name', 'dooring', Date.now() + 1000);
console.LOG(store.get('name'));
setTimeout(() => {
console.log(store.get('name'));
}, 1000);
// 设置成功后的回调
store.set('dooring', 'xuxiaoxi', Date.now() + 1000, (status, key, value) => {
console.log('success');
});
同时 xijs 还在持续扩充更有用的工具函数, 让业务开发更高效. 目前已集成了如下工具函数:
github地址: https://github.com/MrXujiang/xijs
文档地址:h5.dooring.cn/xijs
到此这篇关于localStorage过期时间设置的几种方法的文章就介绍到这了,更多相关localStorage 过期时间内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的localStorage过期时间设置的几种方法全部内容，希望文章能够帮你解决localStorage过期时间设置的几种方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。