localstorage设置过期时间_面向对象编程:原生javascript实现一个支持过期时间的DAO库...

本文主要解决原生localStorage无法设置过期时间的问题&＃xff0c;并通过封装&＃xff0c;来实现一个操作便捷&＃xff0c;功能强大的localStorage库&＃xff0c;关于库封装的一些基本思路和模式&＃xff0c;我将采用之前写的如何用不到200行代码写一款属于自己的js类库中类似的方法&＃xff0c;感兴趣的朋友可以学习&＃xff0c;交流。

设计思路

我们将基于localStorage原始api进行扩展&＃xff0c;让其支持失效时间&＃xff0c;操作完成后的回调。在文章的最后&＃xff0c;我将给出库的完成代码&＃xff0c;接下来我们就一步步实现吧。

正文

1. 首先&＃xff0c;我们来设计库的基本框架&＃xff1a;

 const BaseStorage &＃61; function(preId, timeSign){
   // 初始化一些操作
 }

 BaseStorage.prototype &＃61; {
   storage: localStorage || window.localStorage,
   set: function(key, value, cb, time){
     
   },
   get: function(key, cb){
     
   },
   // 删除storage&＃xff0c;如果删除成功&＃xff0c;返回删除的内容
   remove: function(key, cb){
    
   }
 }


如上可以发现&＃xff0c;我们的storage会有三个核心api&＃xff0c;分别为set&＃xff0c;get&＃xff0c;remove&＃xff0c;我们使用localStorage作为基础库支持&＃xff0c;当然你也可以将上面的库换成sessionStorage或者其他。

2. 有了基本骨架&＃xff0c;我们就可以实现基本功能的封装&＃xff0c;这里我们先在原型中加一个属性&＃xff0c;来列出数据操作中的各个状态。

status: {
 SUCCESS: 0, // 成功
 FAILURE: 1, // 失败
 OVERFLOW: 2, // 数据溢出
 TIMEOUT: 3  // 超时
},


为了实现过期时间&＃xff0c;我们有两种思路&＃xff0c;第一种是先将一个过期时间存到storage中&＃xff0c;每次操作都检查一遍是否过期&＃xff0c;但是这种方案意味着对不同的键就要设置不同的过期时间的storage与之对应&＃xff0c;这样会占用额外的库内存&＃xff0c;维护起来也不方便。另一种方法就是将过期时间存放到键值中&＃xff0c;将时间和值通过标识符分隔&＃xff0c;每次取的时候从值中截取过期时间&＃xff0c;再将真实的值取出来返回&＃xff0c;这种方案不会添加额外的键值对存储&＃xff0c;维护起来也相对简单&＃xff0c;所以我们采用这种方案。 为了区分不同的库对象&＃xff0c;我们还可以添加键前缀&＃xff0c;如下&＃xff1a;

const BaseLocalStorage &＃61; function(preId, timeSign){
   this.preId &＃61; preId; // 键前缀
   this.timeSign &＃61; timeSign || &＃39;|-|&＃39;;  // 过期时间和值的分隔符
 }


基于这个思想&＃xff0c;我们就可以接下来的实现了。

• getKey——修饰key的方法&＃xff0c;不影响用户对真实key的影响

getKey: function(key){
     return this.preId &＃43; key
   },


• set实现

set: function(key, value, cb, time){
     var status &＃61; this.status.SUCCESS,
     key &＃61; this.getKey(key);
     // 设置失效时间&＃xff0c;未设置时间默认为一个月
     try{
       time &＃61; new Date(time).getTime() || time.getTime();
     }catch(e){
       time &＃61; new Date().getTime() &＃43; 1000*60*60*24*31
     }
     try{
       this.storage.setItem(key, time &＃43; this.timeSign &＃43; value);
     }catch(e){
       status &＃61; this.status.OVERFLOW;
     }
     // 操作完成后的回调
     cb && cb.call(this, status, key, value)
   }


• get实现

get: function(key, cb){
     var status &＃61; this.status.SUCCESS,
     key &＃61; this.getKey(key),
     value &＃61; null,
     timeSignLen &＃61; this.timeSign.length,
     that &＃61; this,
     index,
     time,
     result;
     try{
       value &＃61; that.storage.getItem(key);
     }catch(e){
       result &＃61; {
         status: that.status.FAILURE,
         value: null
       }
       cb && cb.call(this, result.status, result.value);
       return result
     }
     if(value) {
       index &＃61; value.indexOf(that.timeSign);
       time &＃61; &＃43;value.slice(0, index);
       // 判断是否过期&＃xff0c;过期则清除
       if(time > new Date().getTime() || time &＃61;&＃61; 0){
         value &＃61; value.slice(index&＃43;timeSignLen);
       }else{
         value &＃61; null,
         status &＃61; that.status.TIMEOUT;
         that.remove(key);
       }
     }else{
       status &＃61; that.status.FAILURE;
     }
     result &＃61; {
       status: status,
       value: value
     };
     cb && cb.call(this, result.status, result.value);
     return result
   }


• remove实现

// 删除storage&＃xff0c;如果删除成功&＃xff0c;返回删除的内容
   remove: function(key, cb){
     var status &＃61; this.status.FAILURE,
     key &＃61; this.getKey(key),
     value &＃61; null;
     try{
       value &＃61; this.storage.getItem(key);
     }catch(e){
       // dosomething
     }
     if(value){
       try{
         this.storage.removeItem(key);
         status &＃61; this.status.SUCCESS;
       }catch(e){
         // dosomething
       }
     }
     cb && cb.call(this, status, status > 0 ? null : value.slice(value.indexOf(this.timeSign) &＃43; this.timeSign.length))
   }


在api的实现过程中&＃xff0c;由于某种误操作很可能导致storage报错&＃xff0c;所以建议最好用trycatch包裹&＃xff0c;这样可以避免影响后面的逻辑。

接下来我们可以这么使用&＃xff1a;

let a &＃61; new BaseStorage(&＃39;_&＃39;, &＃39;&＃64;&＃39;);
a.set(&＃39;name&＃39;, &＃39;123&＃39;)
a.get(&＃39;name&＃39;) // {status: 0, value: "123"}
// 设置失效时间
a.set(&＃39;name&＃39;, &＃39;123&＃39;, null, new Date().getTime() &＃43; 1000*60*60*24*31)
// 移除
a.remove(&＃39;name&＃39;)


完整源码

/**
 * 数据管理器
 */
(function(win){
  const BaseStorage &＃61; function(preId, timeSign){
    this.preId &＃61; preId;
    this.timeSign &＃61; timeSign || &＃39;|-|&＃39;;
  }
 
  BaseStorage.prototype &＃61; {
    status: {
      SUCCESS: 0,
      FAILURE: 1,
      OVERFLOW: 2,
      TIMEOUT: 3
    },
    storage: localStorage || window.localStorage,
    getKey: function(key){
      return this.preId &＃43; key
    },
    set: function(key, value, cb, time){
      var status &＃61; this.status.SUCCESS,
      key &＃61; this.getKey(key);
      // 设置失效时间&＃xff0c;未设置时间默认为一个月
      try{
        time &＃61; new Date(time).getTime() || time.getTime();
      }catch(e){
        time &＃61; new Date().getTime() &＃43; 1000*60*60*24*31
      }
      try{
        this.storage.setItem(key, time &＃43; this.timeSign &＃43; value);
      }catch(e){
        status &＃61; this.status.OVERFLOW;
      }
      cb && cb.call(this, status, key, value)
    },
    get: function(key, cb){
      var status &＃61; this.status.SUCCESS,
      key &＃61; this.getKey(key),
      value &＃61; null,
      timeSignLen &＃61; this.timeSign.length,
      that &＃61; this,
      index,
      time,
      result;
      try{
        value &＃61; that.storage.getItem(key);
      }catch(e){
        result &＃61; {
          status: that.status.FAILURE,
          value: null
        }
        cb && cb.call(this, result.status, result.value);
        return result
      }
      if(value) {
        index &＃61; value.indexOf(that.timeSign);
        time &＃61; &＃43;value.slice(0, index);
        if(time > new Date().getTime() || time &＃61;&＃61; 0){
          value &＃61; value.slice(index&＃43;timeSignLen);
        }else{
          value &＃61; null,
          status &＃61; that.status.TIMEOUT;
          that.remove(key);
        }
      }else{
        status &＃61; that.status.FAILURE;
      }
      result &＃61; {
        status: status,
        value: value
      };
      cb && cb.call(this, result.status, result.value);
      return result
    },
    // 删除storage&＃xff0c;如果删除成功&＃xff0c;返回删除的内容
    remove: function(key, cb){
      var status &＃61; this.status.FAILURE,
      key &＃61; this.getKey(key),
      value &＃61; null;
      try{
        value &＃61; this.storage.getItem(key);
      }catch(e){
        // dosomething
      }
      if(value){
        try{
          this.storage.removeItem(key);
          status &＃61; this.status.SUCCESS;
        }catch(e){
          // dosomething
        }
      }
      cb && cb.call(this, status, status > 0 ? null : value.slice(value.indexOf(this.timeSign) &＃43; this.timeSign.length))
    }
  }
 
  win.BS &＃61; BaseStorage;
})(window)
 


大家也可以基于此扩展更强大的功能&＃xff0c;如果有更好的想法&＃xff0c;欢迎交流&＃xff0c;探讨。

点个在看 你最好看