精华内容
下载资源
问答
  • localStorage设置过期时间

    万次阅读 多人点赞 2019-01-30 15:02:36
    众所周知,前端三大缓存,cookie,sessionStorage,localStorage,cookie空间太小,一旦大了,会消耗流量,知识和存一些登录会话信息,而sessionStorage的过期时间就是关闭浏览器,是个临时会话窗口,但是,最近这个...

    众所周知,前端三大缓存,cookie,sessionStorage,localStorage,cookie空间太小,一旦大了,会消耗流量,只适合存一些登录会话信息,而sessionStorage的过期时间就是关闭浏览器,是个临时会话窗口,但是,最近这个差点把我坑了,就是sessionStorage只能在同一标签下共享,加入你把网址复制粘贴到新打开的标签页里面,你会惊喜的发现,what?居然不共享,这不坑爹呢吗?咳咳。。还有就是localStorage了,这个好处就是存储空间大,长时间保存,同一浏览器,标签页全部共享,它是直接存到电脑硬盘上的,不好的是,它是永久有效的,除非手动改清除,否则它会在你电脑里待上一辈子,供他吃好的喝好的,也就是无法设置失效时间,但是我还真不服了,凭什么我用你就得养你一辈子,哼哼,于是我就自己简单封装一下,让它可以设置失效时间,下面我们用ES6的类来封装

    class Storage{
            constructor(name){
                this.name = 'storage';
            }
            //设置缓存
            setItem(params){
                let obj = {
                    name:'',
                    value:'',
                    expires:"",
                    startTime:new Date().getTime()//记录何时将值存入缓存,毫秒级
                }
                let options = {};
                //将obj和传进来的params合并
                Object.assign(options,obj,params);
                if(options.expires){
                //如果options.expires设置了的话
                //以options.name为key,options为值放进去
                    localStorage.setItem(options.name,JSON.stringify(options));
                }else{
                //如果options.expires没有设置,就判断一下value的类型
                   	let type = Object.prototype.toString.call(options.value);
                   	//如果value是对象或者数组对象的类型,就先用JSON.stringify转一下,再存进去
                    if(Object.prototype.toString.call(options.value) == '[object Object]'){
                        options.value = JSON.stringify(options.value);
                    }
                    if(Object.prototype.toString.call(options.value) == '[object Array]'){
                        options.value = JSON.stringify(options.value);
                    }
                    localStorage.setItem(options.name,options.value);
                }
            }
            //拿到缓存
            getItem(name){
                let item = localStorage.getItem(name);
                //先将拿到的试着进行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){
                    //缓存过期,清除缓存,返回false
                        localStorage.removeItem(name);
                        return false;
                    }else{
                    //缓存未过期,返回值
                        return item.value;
                    }
                }else{
                //如果没有设置失效时间,直接返回值
                    return item;
                }
            }
            //移出缓存
            removeItem(name){
                localStorage.removeItem(name);
            }
            //移出全部缓存
            clear(){
                localStorage.clear();
            }
        }
    

    以上就是全部代码了,diamagnetic说明我全部写在注释里了,我封装的这个还有个好处就是,你存进去是什么类型的值,取出来还是什么类型的值,比如你存进去是个对象,取出来还是个对象,用不着转类型了,大家都知道缓存只支持字符串类型的数据,但是我这里面已经帮你做好了封装,你只管存和取就可以了,下面我们来试试效果

    设置失效时间

    let storage = new Storage();
    storage.setItem({
            name:"name",
           	value:"前端林三哥"
        })
    

    在这里插入图片描述
    下面我把值取出来

    let value = storage.getItem('name');
    console.log('我是value',value);
    

    在这里插入图片描述
    下面我们设置时间短一点,5秒,然后再取出来

    在这里插入图片描述
    在我写的这个功夫应该已经过期了,我们取出来

    let value = storage.getItem('name');
    console.log('我是value',value);
    

    在这里插入图片描述
    false就说明过期了,缓存也给删掉了
    在这里插入图片描述

    下面我们检验存进去的类型和取出来的类型

    普通字符串以上已经试过了,现在试试对象

    storage.setItem({
             name:"name",
             value:{
                    name:"前端林三哥",
                    skills:"聪明,帅气"
             },
       })
    

    在这里插入图片描述
    重点来了,我们直接取

    let value = storage.getItem('name');
    console.log('我是value',value);
    

    在这里插入图片描述
    直接就取出来了
    。。。。。。。。。。。。。。。。。
    下面再试试数组对象

    storage.setItem({
                name:"name",
                value:[
                    {
                        name:"前端林三哥",
                        skills:"聪明,帅气"
                    },
                    {
                        name:"前端林小二",
                        skills:"聪明,帅气,穷"
                    }
                ],
            })
    

    在这里插入图片描述
    我们直接取出来

    let value = storage.getItem('name');
    console.log('我是value',value);
    

    在这里插入图片描述
    是不是很神奇,哈哈,快来试试吧!

    展开全文
  • 封装初衷,无非就是想给LocalStorage设置一个过期时间 class happyLocalStorage { constructor() { } _delLocalStorage(getName) {//删除已经过期LocalStorage let res = JSON.parse(localStorage.getItem...
    • 封装初衷,无非就是想给LocalStorage设置一个过期的时间并且设置值的时候,可以设置任何值
    • 想要达到的效果,本方法要完全实现LocalStorage的功能,并且实现类似cookie的过期时间和设置任何值!
    • cookie过期时间特点:cookie的过期时间,无论是否打开浏览器,到了过期的时间节点就会删除过期的cookie
    • cookie的过期时间无非也就是两种情况
      • 第一:一直开着浏览器,没到过期时间点,数据一直有效,到某个时间点自动清除过期的cookie
      • 第二:设置完cookie关闭浏览器,等到第二次打开,没到过期时间点,数据一直有效,到某个时间点自动清除过期的cookie
    • 本函数实现
      • 第一: 一直开着浏览器,没到过期时间点,数据一直有效,到某个时间点自动清除过期的LocalStorage
      • 第二:这里面我写的有一个小bug就是,如果用户在有效时间内关闭浏览器又打开,那么LocalStorage会一直存在,为了解决这个问题,我弄了一个比较冒险的方法,利用定时器每隔15分钟重新触发一下initLocalStorage这个函数,不喜欢的可以干掉
      • 第三:本函数在setLocalStorage方法中,setValue可以是任何值,不需要再进行手动JSON.stringify,同样再getLocalStorage方法中,也不需要JSON.parse
      • 注意点:本函数一共支持四个方法
        • setLocalStorage 设置
        • getLocalStorage 获取
        • delLocalStorage 删除
        • delAllLocalStorage 删除全部
        • 其中setLocalStorage/getLocalStorage这两个方法是配套的,我在setLocalStorage中内置了JSON.stringify,在getLocalStorage中内置了JSON.parse,所以,不要使用localStorage.setItem的方法设置,然后用getLocalStorage来获取,虽然我做了错误过滤,但是,很有可能出现的结果和当初设置的不一致就是JSON/parse/stringify的问题。反之亦然
    class happyLocalStorage {
      constructor() {}
    
      judgeDataType(val) {//获取数据类型
        return Object.prototype.toString.call(val).slice(8, -1);
      }
    
      _delLocalStorage(getName) {//删除已经过期的LocalStorage
        let getLocalStorageValue = localStorage.getItem(getName);
        try {
          getLocalStorageValue = JSON.parse(getLocalStorageValue);
        } catch (error) {
          getLocalStorageValue = getLocalStorageValue;
        };
        if (this.judgeDataType(getLocalStorageValue) == "Object" && !!getLocalStorageValue._effectiveTime) {
          let res = JSON.parse(localStorage.getItem(getName));
          let effectiveTime = new Date(res._effectiveTime).getTime();
          if (new Date().getTime() - effectiveTime > 0) {//过期
            localStorage.removeItem(getName);//删除对应的key
          }
        }
      }
    
      _initLocalStorage() {//初始化
        let len = localStorage.length;  // 获取长度
        let arr = [];
        if (len > 0) {
          for (let i = 0; i < len; i++) {
            let getKey = localStorage.key(i);
            arr.push(getKey);
          };
          arr.forEach(item => {//这里面存储的一定是有值的LocalStorage
            this._delLocalStorage(item)
          })
        };
      }
    
      /**
       * 功能:设置LocalStorage的值和过期时间
       * @param {*} setName:设置的名称 string
       * @param {*} setValue:设置的值 any
       * @param {*} expiresObj:过期时间 {}/{timeScale:'秒/分/时 日/月/年',timeSize:number} 
       */
      setLocalStorage(setName, setValue, expiresObj = null) {
        if (expiresObj == null) {//如果用户不输入第三个参数
          let JSONStringify = JSON.stringify(setValue);
          localStorage.setItem(setName, JSONStringify);
        } else {//这里面输出的一定是一个已经JSON.stringify好的对象
          if (Object.keys(expiresObj).length == 0) {//输入的是一个空对象 设置默认过期时间:15分钟
            let newDate = new Date();//获取当前的时间对象
            let nowTimeStamp = newDate.getTime();//获取当前时间对象的时间戳
            nowTimeStamp += (1000 * 60 * 15);//将现在的时间戳和设置过期时间期间产生的时间戳 累加
            newDate.setTime(nowTimeStamp);//将累加的时间戳设置到过期时间上
            expiresObj[setName] = setValue;//将传入的名称和值以key/value的形式挂载到expiresObj上
            expiresObj._effectiveTime = newDate;//将累加好的时间挂载到expiresObj
            let stringifyExpiresObj = JSON.stringify(expiresObj);//将expiresObj转成字符串
            localStorage.setItem(setName, stringifyExpiresObj);//设置localStorage
    
            setTimeout(() => {//页面一直开着,到了过期时间就删掉
              this.delLocalStorage(setName);
            }, 1000 * 60 * 15);
          } else {//输入的不是空对象
            let newDate = new Date();
            let nowTimeStamp = newDate.getTime();
            let timeout = null;
            switch (expiresObj.timeScale) {//判断时间规格
              case '秒':
                nowTimeStamp += (1000 * expiresObj.timeSize);
                timeout = (1000 * expiresObj.timeSize);
                break;
              case '分':
                nowTimeStamp += (1000 * 60 * expiresObj.timeSize);
                timeout = (1000 * 60 * expiresObj.timeSize);
                break;
              case '时':
                nowTimeStamp += (1000 * 60 * 60 * expiresObj.timeSize);
                timeout = (1000 * 60 * 60 * expiresObj.timeSize);
                break;
              case '日':
                nowTimeStamp += (1000 * 60 * 60 * 24 * expiresObj.timeSize);
                timeout = (1000 * 60 * 60 * 24 * expiresObj.timeSize);
                break;
              case '月':
                nowTimeStamp += (1000 * 60 * 60 * 24 * 30 * expiresObj.timeSize);
                timeout = (1000 * 60 * 60 * 24 * 30 * expiresObj.timeSize);
                break;
              case '年':
                nowTimeStamp += (1000 * 60 * 60 * 24 * 30 * 12 * expiresObj.timeSize);
                timeout = (1000 * 60 * 60 * 24 * 30 * 12 * expiresObj.timeSize);
                break;
    
              default:
                break;
            }
            newDate.setTime(nowTimeStamp);//将累加的时间戳设置到过期时间上
            expiresObj[setName] = setValue;
            expiresObj._effectiveTime = newDate;
            let stringifyExpiresObj = JSON.stringify(expiresObj);
            localStorage.setItem(setName, stringifyExpiresObj);
    
            setTimeout(() => {
              this.delLocalStorage(setName);
            }, timeout);
          }
        }
      }
    
      /**
       * 功能:获取LocalStorage的值
       * @param {*} getName:获取的名称
       */
      getLocalStorage(getName) {
        let getLocalStorageValue = localStorage.getItem(getName);
    
        try {
          getLocalStorageValue = JSON.parse(getLocalStorageValue);
        } catch (error) {
          getLocalStorageValue = getLocalStorageValue;
        };
    
        if (this.judgeDataType(getLocalStorageValue) == "Object" && !!getLocalStorageValue._effectiveTime) {
          let res = JSON.parse(localStorage.getItem(getName));//根据getName获取localStorage中对应的存储对象
          let effectiveTime = new Date(res._effectiveTime).getTime();//获取当初设置的时候的过期时间时间戳
          if (new Date().getTime() - effectiveTime < 0) {//如果当前的时间戳<当初设置的时候的过期时间时间戳 证明:没过期
            return JSON.parse(localStorage.getItem(getName))[getName];
          } else {//过期
            localStorage.removeItem(getName);
            return null;
          }
        } else {
          return getLocalStorageValue;
        }
      }
    
      delLocalStorage(name) {//删除指定的LocalStorage
        localStorage.removeItem(name);
      }
    
      delAllLocalStorage() {//删除全部的LocalStorage
        localStorage.clear();
      }
    }
    
    let hl = new happyLocalStorage();
    hl._initLocalStorage();
    setInterval(() => {
      console.log('只要引入了我这个方法,并且浏览器一直打开,每隔15分钟会自动验证有没有过期的localStorage');
      hl._initLocalStorage();
    }, 1000 * 60 * 15);
    
    export {
      hl
    }
    

    目前就想到这么多,确实留了一个小bug,但是目前没有好办法,我找不到类似cookie的过期时间一样的效果,

    展开全文
  • localStorage 设置过期时间

    万次阅读 多人点赞 2018-11-02 16:55:08
    localStorage除非人为手动清除,否则会一直存放在浏览器中,但是很多情况下我们可能需要localStorage有一个过期时间,比如我们将用户身份认证 token 保存在客户端,1周之内有效,超过一周则要重新登录,那么这种需求...

    localStorage除非人为手动清除,否则会一直存放在浏览器中,但是很多情况下我们可能需要localStorage有一个过期时间,比如我们将用户身份认证 token 保存在客户端,1周之内有效,超过一周则要重新登录,那么这种需求该怎么实现呢
    要知道,localStorage本身并没有提供过期机制,既然如此,那就只能我们自己来实现了,我们可以直接给其原型上加上这样一个方法

    Storage.prototype.setExpire=(key,value,expire) =>{
    
    };
    Storage.setExpire(key,value,expire);

    要过期就必须要记录时间,我们的思路是,设置值得时候就将当前时间记录进去,然后获取值得时候判断一下当前时间和之前的时间差是否在某个范围之内,若果超出范围,则清空当前项,并返回null

    要将时间加入到值中就必须要定义一个格式

    Storage.prototype.setExpire=(key, value, expire) =>{
        let obj={
            data:value,
            time:Date.now(),
            expire:expire
        };
        localStorage.setItem(key,JSON.stringify(obj));
    }

    包括下面3个字段

    data 实际的值
    time 当前时间戳
    expire 过期时间

    因为localStorage 设置的值不能为对象, 所以这里使用了 JSON.stringify 方法将其转为字符串,最终在使用的时候得转回来。

    接着我们添加一个获取的方法

    Storage.prototype.getExpire= key =>{
        let val =localStorage.getItem(key);
        if(!val){
            return val;
        }
        val =JSON.parse(val);
        if(Date.now()-val.time>val.expire){
            localStorage.removeItem(key);
            return null;
        }
        return val.data;
    }

    我们可以先测试一下

    localStorage.setExpire("token",'xxxxxx',5000);
    window.setInterval(()=>{
        console.log(localStorage.getExpire("token"));
    },1000)

    本质上我们的思路并非是要定时去清理过期的项,而是在获取的时候判断是否过期,如果过期再去清除该项。

    展开全文
  • localstorage 设置过期时间

    千次阅读 2018-04-26 18:26:22
    var exp ={} exp.set=function(id){ ... var data = localStorage.getItem('cacheOrder'); var curTime = new Date().getTime(); var newItem = {id:id,time:curTime} var list =[] var fla...
    var exp ={}
    
    
       exp.set=function(id){
    
        var data = localStorage.getItem('cacheOrder');
        var curTime = new Date().getTime();
        var newItem = {id:id,time:curTime}
        var list =[]
          var flag = true
           if (data) {
    
                 list = JSON.parse(data)
    
            }   
          var item = list.filter(item=>item.id == id)
              if (item) {
                   flag = false
              } 
              else{
                list.push(newItem)
              } 
    
            localStorage.setItem("cacheOrder",JSON.stringify(list));
            return flag
    
       }  
    
     exp.get=function(id){
         var expire = 100000
         var data = localStorage.getItem('cacheOrder'); 
         var curTime = new Date().getTime();
         var flag = false
         if (data) {
    
              var list = JSON.parse(data)
    
                  list.forEach(item=>{
    
                    if (item.id==id) {
                        if (curTime-item.time>expire) {
                            flag = true
                        }
    
                    }
                  })
    
            }       
    
           return flag 
    
     }
     exp.auto=function(){
    
         var expire = 86400000
         var data = localStorage.getItem('cacheOrder'); 
         var curTime = new Date().getTime();
         var all = []
         if (data) {
    
              var list = JSON.parse(data)
    
                  list.forEach(item=>{
    
                  var temp={id:item.id,flag:true}
    
                    if (curTime-item.time>expire) {
    
                         temp.flag = true
                        }
                    else{
    
                        temp.flag = false
                    }   
                  all.push(temp)
                  })
    
            }       
    
           return all
    
    
     }  
    
    
     export default exp
    1. 简单的计时器
    var o =new Date().getTime()
    var exp = 0
    
    function test(){
    
      setTimeout(function(){
    
          var n =  new Date().getTime()
    
           exp=(n-o)/1000
    
    
    
           if (exp<100) {
              console.log(exp)
             test()
           }else{
    
             return exp
           } 
    
         },1000)
    
    
    }
    
    
    test()
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,010
精华内容 4,804
关键字:

localstorage设置过期时间