具有时效性localStroage基础类的实现

实现思路

实现思路如上图所示，包括三个功能：新建（set）、获取（get）和删除（remove）

实现原理

在存储localStorage的时候为每一项数据添加时效性timeOut字段（数据格式如下），当读取localStorage的时候去判断当前数据是否过期，如果过期则无法获取数据，并同时删除相关数据

 //存储的数据格式
 key：{
     value：{},//存储的值
     timeOut:time //过期时间
  }

基本架构

class TimeLocalStorage {
    storage = localStroage || window.localStorage 
    status = {
            SUCCESS:"SUCCESS" //成功
            FAILURE:'ERROR',
            OVERFLOW:'OVERFLOW',//数据溢出
            TIMEOUT:'TIMEOUT',//超市
     }
     
     deleteTimeOut = "" //是否删除过期数据
     
     constructor(deleteTimeOut = true){
         this.deleteTimeOut = deleteTimeOut
      }
      /**
      * @description 向localStorage中存值，
      * @param key
      * @param value
      * @param cb
      * @param time 时间戳
      * @param day 天数
      * @param hours 小时
      * @param minutes 分钟
      */
      set({key,value,cb,time,day,hours,minutes}){}
      get(key,cb){}
       /**
      * @description 向localStorage中存值，
      * @param key
      * @param value
      * @param cb
      * @returns
      */
      
      remove(key,cb){}
      
      /**                                   
       * @description 设置localStorage的过期时间 
       * @param param                       |
       * @returns 默认两小时 可以传递时间戳、也可以传递天、小时、分钟 
       */
       static getLocalTime({time,day,hours,minutes}){
       //没传值，默认两小时
           if(!time && !hours && !minutes){
               return new Date().getTime() + 1000 * 60 *60 *2
            } 
            if(time){
                return new Date(time).getTime() || time.getTime()
            }
            const dataDay = day ? day * 24 * 1
            const dataHours = hour || 1
            const dataMinutes = minutes || 1
            return new Date().getTime() + 1000 * dataMinutes * dataHours * dataDay
       }   
       /**                                   
       * @description 设置返回的结果
       * @param status
       * @param value
       * @param cb
       * @returns  
       */
       static setResult(status,value,cb){
           cb && cb(status,value)
           
           return {
               status,
               value,
           }
       }
 }      

TimeLocalStorage的状态分别为SUCCESS、FAILURE、OVERFLOW、TIMEOUT，在初始化的时候设置在获取的时候清除过期的数据deleteTimeOut默认为true

实现的方法

set方法

/**
     * @description 向localStorage中存值，
     * @param key
     * @param value
     * @param cb
     * @param time 时间戳
     * @param day 天数
     * @param hours 小时
     * @param minutes 分钟
*/

set({key,value,cb,time,day,hours,minutes}){
    // 时间都不传默认为两小时，可指定时间戳。 
    // 也可以指定到具体的天、小时、分钟过期
    
    let status = this.status.SUCCESS
    
    //获取过期时间
    const localTime = TimeLocalStorage.getLocalTime({time,day,hours,minutes})
    
    // 设置存储的数据格式
    const localData = {
        value,
        timeOut:loaclTime
    }
    
    try {
        this.storage.setItem(key,JSON.stringify(loaclData))
        }catch(e){
            status = this.status.OVERFLOW
        }
        
        //操作完成后的回调
        cb && cb(status,key,localData)
}     

get方法的实现

/**
* @description 获取loaclStorage的值
* @param key
* @param cb
*/
get(key,cb){
    const status = this.status.SUCCESS
    let value = null
    let result = null
    try{
        value = this.storage.getItem(key)
     }catch(e){
         result = TimeLocalStorage.setResult(this.status.FAILURE, null, cb);
         return result
     }
     //如果数据不存在，直接返回失败
     if(!value){
         result = TimeLoaclStorage.setResult(this.status.FAILURE,null,cb)
         return result
     }
     
     value= JSON.parse(value)
     //如果没有设置timeOut字段，则默认未超过时间
     cosnt time  = value?.timeOut || 0
     
     //判断是否过期
     if(time >newData().getTime() || time ===0){
         result = TimeLoaclStorage.setResult(status,value.value || "",cb)
         retrun result
     }
     
     //过期的时候根据deleteTimeOut 决定是否删除数据
     
     this.dedeleteTimeOut && this.remove(key);
     reslut = TimeLoaclStorage.setResult(this.status.TIMEOUT,null,cb)
     
     return result
}         

remove方法

/**
 * @description 删除storage，如果删除成功，返回删除的内容
*/
remove(key,cb){
    let status = this.status.FAILURE
    Let value
    
    try{
        value = this.stroage.getItem(key)
    } catch (e) {
        cb && cb(status, null)
        return
    } 
    if (!value) { 
        cb && cb(status, null)
        return
     }
    try { 
        this.storage.removeItem(key);
    } catch (e) {
        cb && cb(status, null)
        return
    }
    status = this.status.SUCCESS
    value = status ==="SUCCESS"? value?.value || value :null 
    cb && cb(status,value)
 }

使用

     const storage = new TimeLocalStorage()
     
     storage.set({
         key:'test',
         value:{test1:1,test2:2}
         cb:(data)=>{
             console.log(data)
         }
         hours:7
     })
     
     cosnt testData = storage.get("test")
     console.log(testData)
     const removeData = storage.remove("test")
     console.log(removeData)