美文网首页
给本地缓存localStorage添加过期时间

给本地缓存localStorage添加过期时间

作者: Gavin222 | 来源:发表于2019-08-05 17:54 被阅读0次

项目需要,要把部分数据写到缓存里,以便随时取用.但又要保证其时效性,要一定时间后再次进入获取最新数据,所以就参考资料,改了个给localstorage添加过期时间的方法.代码如下,为了方便,就不贴图片了.直接贴代码

export class myStorage{

    //设置缓存

    setItem(params:object){

        let obj = {

            key:'',

            value:'',

            expires:"",//过期时间;

            startTime:new Date().getTime()//记录何时将值存入缓存,毫秒级

        }

        let options:any = {};

        //将obj和传进来的params合并

        Object.assign(options,obj,params);

        if(options.expires){

        //如果options.expires设置了的话

        //以options.key为key,options为值放进去

            localStorage.setItem(options.key,JSON.stringify(options));

        }else{

        //如果options.expires没有设置,就判断一下value的类型

            let type = Object.prototype.toString.call(options.value);

            //如果value是对象或者数组对象的类型,就先用JSON.stringify转一下,再存进去

            if(type == '[object Object]'){

                options.value = JSON.stringify(options.value);

            }

            if(type == '[object Array]'){

                options.value = JSON.stringify(options.value);

            }

            localStorage.setItem(options.key,options.value);

        }

    }

    //获取缓存

    getItem(key:string){

        let item:any = localStorage.getItem(key);

        if(item){//判断缓存是否存在

            //先将拿到的试着进行json转为对象的形式

            try{

                item = JSON.parse(item);

            }catch(error){

            //如果不行就不是json的字符串,就直接返回

                item = item;

            }

            //如果有startTime的值,说明设置了失效时间

            if(item.startTime){

                let date = new Date().getTime();

                //何时将值取出减去刚存入的时间,与item.expires比较,如果大于就是过期了,如果小于或等于就还没过期

                if(date - item.startTime > item.expires){

                //缓存过期,清除缓存,返回null

                    localStorage.removeItem(key);

                    return null;

                }else{

                //缓存未过期,返回值

                    return item.value;

                }

            }else{

            //如果没有设置失效时间,直接返回值

                return item;

            }

        }else{

            return null;

        }

    }

    //移出缓存

    removeItem(key:string){

        localStorage.removeItem(key);

    }

    //移出全部缓存

    clear(){

        localStorage.clear();

    }

}

注:详见https://blog.csdn.net/zhaoxiang66/article/details/86703438

相关文章

  • 给本地缓存localStorage添加过期时间

    项目需要,要把部分数据写到缓存里,以便随时取用.但又要保证其时效性,要一定时间后再次进入获取最新数据,所以就参考资...

  • localStorage缓存

    本地缓存Storage localStorage及sessionStorage使用(没有过期时间,不清空就一直在)...

  • 前端优化

    前端优化 缓存 本地数据存储 本地存储分为cookie(兼容性好)、localStorage(存在时间久、存储空间...

  • 浅谈浏览器控制缓存的策略

    强缓存 服务器返回过期时间,客户端在该时间内发送的请求都会在本地缓存内查找; 协商缓存 当前时间超过了过期时间,客...

  • localStorage本地缓存

    清空localStorage (clear) 存储数据 (setItem) 读取数据 (getItem) 删除某个...

  • h5缓存--localStorage手动控制过期

    浏览器缓存localStorage一旦存储起来,除非手动删除,否则不会过期,有时候项目的业务需要控制过期的时间,下...

  • 缓存

    本地缓存 localStorage 大小:5M 永久性存储session会话缓存 session...

  • Java Script 本地缓存

    本地缓存(数据存放到浏览器) 1、cookie 2、localStorage(永久缓存) (1)localStor...

  • 双十一某电商缓存失效及其解决方案

    概述 缓存失效就是在 nginx 中设置本地缓存时设置了一个过期时间,比如是 10 分钟, 10 分钟后会自动过期...

  • 关于本地存储

    1、html5几种存储形式本地存储(localStorage && sessionStorage)离线缓存(app...

网友评论

      本文标题:给本地缓存localStorage添加过期时间

      本文链接:https://www.haomeiwen.com/subject/qrxvdctx.html