如何设置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);
        }
  }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM