如何让localStorage支持过期时间设置

　　前言
　　最近在项目开发中，遇见了大家都常会遇见的问题，让本地存储支持过期时间的设置。那相信学习前端的童鞋们都知道，我们经常是会用的 cookie 、localStorage 、sessionStorage ，它们三个都是可以用来存放数据的。这里我们就不细讲它们之间的区别，主要讲当我们设置localStorage 的时候，怎么来给它设置一个过期时间了？下来我们就开始今天的主题。封装
　　根据一般的业务需求，我们需要支持`新增，修改，删除`，按照初步设想，开始编写我们代码。可跳过中间部分，直接查看最后的完整版代码示例。(TS目前还有不太熟练的地方，有什么地方有问题欢迎指出)// 定义类 class NStorage {   storage: Storage;   constructor(name?: string) {     this.storage = window[name as keyof typeof window] || window.localStorage   }   /**    * @description 存储方法    * @param {String} key 键名    * @param {any} value 值    * @param {number} [expires] 可选，默认0，永久    */   set(key: string, value: any, expires: number = 0) {     const storeValue = {       value,       startTime: new Date().getTime(),       __expires__: expires     }     this.storage.setItem(key, JSON.stringify(storeValue))   }   /**    * @description 获取方法    * @param {String} key 键名    * @returns {any} 值    */   get(key: string) {     try {       const storeItem = this.storage.getItem(key) || ＂{}＂       const storeValue = JSON.parse(storeItem)       const time = new Date().getTime()       // 如果是永久，则直接返回       if (storeValue?.__expires__ === 0) return storeValue       // 判断当前时间是否过期       if (storeValue?.startTime && (time - storeValue?.startTime >= storeValue?.__expires__)) {         this.remove(key);         return null;       }       return storeValue.value     } catch (error) {       return null     }   }   /**    * @description 删除方法    * @param {String} key 删除键名    */   remove(key: string) {     key && this.storage.removeItem(key);   }   /**    * @description 清除所有本地存储    */   clear() {     this.storage.clear();   } }
　　下面是本地测试：const store = new NStorage()  store.set(＂name＂, ＂小红＂, { expires: 10 })  let count = 0 const time = setInterval(() => {   const name = store.get(＂name＂)   console.log(name)   count += 1    if (count > 10) {     clearInterval(time)   } }, 1000)
　　在控制台可以看见打印的 小红 ，3秒后localStorage 里面的值就会被删除。功能我们是实现啦，是不是就可以皆大欢喜了？有没有bug？有没有可以优化的问题了？那当然是有的了：
　　1. 设置的过期时间，表示的是秒？分？小时？
　　2. 如果多次设置同一个值，那么依据现在逻辑，每次都会重新计算时间，但是我可能只是更新值，时间不需要重新计算了？优化
　　定义出选项类型// 定义支持时间类型，依次：年、月、日、时、分、秒 type TUnitType = ＂Y＂ | ＂M＂ | ＂D＂ | ＂h＂ | ＂m＂ | ＂s＂ // 定义可选参类型 interface IExtraOptions {   expires?: number;   unit?: TUnitType,   reset?: boolean }  // 设置默认初始值 const EXTRA_OPTIONS: IExtraOptions = {   expires: 0, // 默认永久   unit: ＂s＂, // 默认秒   reset: false // 是否重置时间 } // 根据单位和传入时间，计算出毫秒级时间 function calcTime(time: number, unit: TUnitType = ＂s＂) {   let newTime = 0   switch (unit) {     case ＂Y＂:       newTime = time * 365 * 24 * 60 * 60 * 1000       break;     case ＂M＂:       // 注意⚠️：月份这里偷懒，直接使用每月30天计算       newTime = time * 30 * 24 * 60 * 60 * 1000       break;     case ＂D＂:       newTime = time * 24 * 60 * 60 * 1000       break;     case ＂h＂:       newTime = time * 60 * 60 * 1000       break;     case ＂m＂:       newTime = time * 60 * 1000       break;     case ＂s＂:       newTime = time * 1000       break;     default:       newTime = time       break;   }   return newTime }   **修改 set、get 方法**    /**    * @description 存储方法    * @param {String} key 键名    * @param {any} value 值    * @param {number} [options] 可选    * @param {Number} [options.expires] 默认0，永久    * @param {String} [options.unit] 默认＂s＂，秒    * @param {Boolean} [options.reset] 默认false，不重置    */   set(key: string, value: any, options?: IExtraOptions) {   const isExist = this.hasKey(key)   const extra = Object.assign(EXTRA_OPTIONS, options)   if (isExist) {     // 如果存在，判断是否是需要重新设置值     const sValue = this.get(key, true)     sValue.value = value     sValue.__expires__ = calcTime(extra.expires || sValue.__expires__, extra.unit || sValue.__unit__)     if (extra.reset) {       // 存在且重新设置时间       sValue.startTime = new Date().getTime()       this._set(key, sValue)     } else {       // 如果已经存在，且不重新计算时间，则直接修改值后存储       this._set(key, sValue)     }   } else {     const storeValue = {       value,       startTime: new Date().getTime(),       __expires__: calcTime(extra.expires as number, extra.unit),       __unit__: extra.unit     };     this._set(key, storeValue)   } }   /**    * @description set内部方法    * @param {String} key 键名    * @param {any} value 值    */   private _set(key: string, value: any) {     this.storage.setItem(key, JSON.stringify(value));   }   /**    * @description 获取方法    * @param {String} key 键名    * @param {Boolean} [isMerge] 可选，是否获取处理后的对象    * @returns {any} 值    */   get(key: string, isMerge: boolean = false) {     try {       // 不存在直接返回 null       if (!key) return null       const storeItem = this.storage.getItem(key) || ＂{}＂       const storeValue = JSON.parse(storeItem)       const time = new Date().getTime()       // 如果是永久，则直接返回       if (storeValue?.__expires__ === 0) return isMerge ? storeValue : storeValue.value;       // 判断当前时间是否过期，过期则删除当前存储值       if (storeValue?.startTime && (time - storeValue?.startTime >= storeValue?.__expires__)) {         this.remove(key);         return null;       }       return isMerge ? storeValue : storeValue.value;     } catch (error) {       return null     }   }   /**    * @description 是否存在    * @param {String} key 键    * @returns {Boolean} true｜false    */   hasKey(key: string) {     if (!key) return false     const value = this.get(key)     return value ? true : false   }优化后使用介绍const store = new NStorage() // 普通设置，不过期 store.set(＂name＂, ＂小红＂) // 设置过期时间5秒 store.set(＂name＂, ＂小红＂, { expires: 5 }) // 设置过期时间5分钟，其他更换单位即可 store.set(＂name＂, ＂小红＂, { expires: 5, unit: ＂m＂ }) // 重新计算有效时长（就相当于在设置的时刻起，再往后延长之前的设置时间） store.set(＂name＂, ＂小红＂, { reset: true })  // 获取值 store.get(＂name＂)  // 删除值 store.remove(＂name＂)  // 删除所有值 store.clear()  // 当前存储值中是否存在 store.hasKey(＂name＂)完整版代码// 定义支持时间类型，依次：年、月、日、时、分、秒 type TUnitType = ＂Y＂ | ＂M＂ | ＂D＂ | ＂h＂ | ＂m＂ | ＂s＂ // 定义可选参类型 interface IExtraOptions {   expires?: number;   unit?: TUnitType,   reset?: boolean }  // 设置默认初始值 const EXTRA_OPTIONS: IExtraOptions = {   expires: 0, // 默认永久   unit: ＂s＂, // 默认秒   reset: false // 是否重置时间 } // 根据单位和传入时间，计算出毫秒级时间 function calcTime(time: number, unit: TUnitType = ＂s＂) {   let newTime = 0   switch (unit) {     case ＂Y＂:       newTime = time * 365 * 24 * 60 * 60 * 1000       break;     case ＂M＂:       // 月份这里偷懒，直接使用每月30天计算       newTime = time * 30 * 24 * 60 * 60 * 1000       break;     case ＂D＂:       newTime = time * 24 * 60 * 60 * 1000       break;     case ＂h＂:       newTime = time * 60 * 60 * 1000       break;     case ＂m＂:       newTime = time * 60 * 1000       break;     case ＂s＂:       newTime = time * 1000       break;     default:       newTime = time       break;   }   return newTime }  class NStorage {   storage: Storage;   constructor(name?: string) {     this.storage = window[name as keyof typeof window] || window.localStorage   }   /**    * @description 存储方法    * @param {String} key 键名    * @param {any} value 值    * @param {number} [options] 可选    * @param {Number} [options.expires] 默认0，永久    * @param {String} [options.unit] 默认＂s＂，秒    * @param {Boolean} [options.reset] 默认false，不重置    */   set(key: string, value: any, options?: IExtraOptions) {     const isExist = this.hasKey(key)     const extra = Object.assign(EXTRA_OPTIONS, options)     if (isExist) {       // 如果存在，判断是否是需要重新设置值       const sValue = this.get(key, true)       sValue.value = value       sValue.__expires__ = calcTime(extra.expires || sValue.__expires__, extra.unit || sValue.__unit__)       if (extra.reset) {         // 存在且重新设置时间         sValue.startTime = new Date().getTime()         this._set(key, sValue)       } else {         // 如果已经存在，且不重新计算时间，则直接修改值后存储         this._set(key, sValue)       }     } else {       const storeValue = {         value,         startTime: new Date().getTime(),         __expires__: calcTime(extra.expires as number, extra.unit),         __unit__: extra.unit       };       this._set(key, storeValue)     }   }   /**    * @description set内部方法    * @param {String} key 键名    * @param {any} value 值    */   private _set(key: string, value: any) {     this.storage.setItem(key, JSON.stringify(value));   }   /**    * @description 获取方法    * @param {String} key 键名    * @param {Boolean} [isMerge] 可选，是否获取处理后的对象    * @returns {any} 值    */   get(key: string, isMerge: boolean = false) {     try {       // 不存在直接返回 null       if (!key) return null       const storeItem = this.storage.getItem(key) || ＂{}＂       const storeValue = JSON.parse(storeItem)       const time = new Date().getTime()       // 如果是永久，则直接返回       if (storeValue?.__expires__ === 0) return isMerge ? storeValue : storeValue.value;       // 判断当前时间是否过期，过期则删除当前存储值       if (storeValue?.startTime && (time - storeValue?.startTime >= storeValue?.__expires__)) {         this.remove(key);         return null;       }       return isMerge ? storeValue : storeValue.value;     } catch (error) {       return null     }   }   /**    * @description 删除方法    * @param {String} key 删除键名    */   remove(key: string) {     key && this.storage.removeItem(key);   }   /**    * @description 清除所有本地存储    */   clear() {     this.storage.clear();   }   /**    * @description 是否存在    * @param {String} key 键    * @returns {Boolean} true｜false    */   hasKey(key: string) {     if (!key) return false     const value = this.get(key)     return value ? true : false   } }最后
　　里面的逻辑也可根据需求自己添加修改，代码测试我也可能存在未测到的地方，如果有问题欢迎各位大大指出！