随笔 - 2  文章 - 0  评论 - 0  阅读 - 3254

如何设置LocalStorage过期时间

前端缓存CookieLocalStorageSessionStorage 根据业务场景不同来选择使用
老生常谈的对比来说:
Cookie: 存储量小。
SessionStorage:存储周期仅仅到浏览器关闭,存储量是够了,用起来也真是够了,无法多个Tab页共享。局限性也很大。
LocalStorage::存储量和存储周期都够用了,但是有些业务场景就是不想永久保存就很尴尬。
要么找现成的类库处理,要么手写一个,分享一个之前工作中的一次封装,直接上代码

class Store {
constructor(key) {
this.key = 'store';
}
// 存储
setItem(params) {
let initObj = {
key: '', // 存储的key
value: '', // 存储的值
validity: null, // 过期时间 单位:毫秒
start: new Date().getTime() // 记录什么时候存储的
}
let options = {};
// 合并、并处理参数
Object.assign(options, initObj, params);
localStorage.setItem(options.key, JSON.stringify(options));
}
// 取值
getItem(key) {
let options = localStorage.getItem(key);
// 设置了过期时间
if ( options.validity && options.validity > 0 ) {
const date = new Date().getTime();
// 判断是否超时
if ( date - options.start > options.validity ) {
// 缓存过期,清除缓存,返回false
localStorage.removeItem(key);
return false;
} else {
// 存储还没到时间
return options.value;
}
} else {
// 如果没有设置失效时间,直接返回值
return options.value;
}
}
// 对外暴露移出缓存方法
removeItem(key){
localStorage.removeItem(key);
}
}
posted on   齐锋  阅读(1588)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示