如何设置LocalStorage过期时间
前端缓存Cookie、LocalStorage、SessionStorage 根据业务场景不同来选择使用
老生常谈的对比来说:
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); } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了