还在用localStorage及sessionStorage原生方法?教你如何提升

localStorage、sessionStorage是H5引入的新特性，是WEB端存储数据或者缓存数据、提升用户体验的原生的解决方案，兄弟俩统归webStorage。其中localStorage主要作为本地存储使用，除非主动删除，否则一直存放于浏览器中；而sessionStorage主要用于临时保存同一窗口（或标签页）数据，数据会在窗口（或标签页）关闭时“销毁”。

与传统的cookie相比较，有一些共同特性比如“域名独立存放”，同时Web Storage存储还做了一些“变通”，一方面是使用方法原生，封装好无需自定义，即开即用；另一方面存储容量显著提升，localStorage、sessionStorage存储空间最高可达5MB，为业务功能设计增加了很多便利和灵活性。但与cookie相比较，localStorage、sessionStorage也有一些小“缺陷”，比如不支持属性定义比如过期时间设置，这为一些业务场景的应用制造了一些“麻烦”（设计者的初衷并非如此哈），如某接口数据不频繁，缓存在sessionStorage是个不错的选择，但接口数据又不是一成不变的，功能设计上期望能隔一段时间刷新一次（过期自动刷新）。

下面就介绍一种localStorage、sessionStorage自定义过期时间或属性的方法，解决实际业务问题。

（前置说明：node.js/javascript开发环境，以token存取及销毁为例展开说明）

• validStorageTypes属性

validStorageTypes属性有两个固定元素，分别为'sessionStorage'及'localStorage'，设计目的是入参校验，通过数组原生的includes方法确保调用window的sessionStorage或者localStorage

  validStorageTypes: ['sessionStorage', 'localStorage']

• setItem方法

参数接受4个参数（参数可根据实际需要调整），动态参数storageType指向具体需要调用的存储类型（既可以选择调用sessionStorage，也可以选择调用localStorage），key为存储对象的名称，token为需要存入的token数据，duration为生命周期，默认有效期为1天。方法调用时首先会对storageType进行有效性校验，有效的storageType才会继续向下执行。使用入参的token+duration构造一个对象，其中expire为使用当前时间戳+duration计算得出的失效时间戳，方便后续是否时效判断。携带了失效时间戳的对象构造好后转换为字符串格式，调用原生方法将字符串格式的对象数据存放到对应存储指定的key中。

 setItem (storageType, key, token, duration = 86400000) {
     if (!this.validStorageTypes.includes(storageType)) return null
     const obj = {
       token: token,
       expire: new Date().getTime() + duration
     }
     window[storageType].setItem(key, JSON.stringify(obj))
   }

• getItem方法

参数接受2个参数（参数可根据实际需要调整），动态参数storageType指向具体需要调用的存储类型（既可以选择调用sessionStorage，也可以选择调用localStorage），key为存储对象的名称。方法调用时首先会对storageType进行有效性校验，有效的storageType才会继续向下执行。根据key去指定存储对象提取数据后判断对象是否为空，为空返回，不为空时将对象转换为对象格式，提取失效时间戳，并与当前时间戳对比：

当前时间戳<失效时间戳时，token未过期，直接返回token

当前时间戳>=失效时间戳时，token过期，销毁token，返回null

 getItem (storageType, key) {
     if (!this.validStorageTypes.includes(storageType)) return null
     const cacheData = window[storageType].getItem(key)
     if (!cacheData) return null
     const parsedCacheData = JSON.parse(cacheData)
     const currentTime = new Date().getTime()
     if (currentTime < parsedCacheData.expire) {
       return parsedCacheData.token
     } else {
       window[storageType].removeItem(key)
     }
     return null
   }

• removeItem方法

参数接受2个参数（参数可根据实际需要调整），动态参数storageType指向具体需要调用的存储类型（既可以选择调用sessionStorage，也可以选择调用localStorage），key为存储对象的名称。方法调用时首先会对storageType进行有效性校验，有效的storageType才会继续向下进行。根据key去指定存储对象销毁对应数据，适合退出登录等场景调用。

  removeItem (storageType, key) {
     if (!this.validStorageTypes.includes(storageType)) return null
     window[storageType].removeItem(key)
   }

• 完整代码示例

 export const webStorage = {
   validStorageTypes: ['sessionStorage', 'localStorage'],
   setItem (storageType, key, token, duration = 86400000) {
     if (!this.validStorageTypes.includes(storageType)) return null
     const obj = {
       token: token,
       expire: new Date().getTime() + duration
     }
     window[storageType].setItem(key, JSON.stringify(obj))
   },
   getItem (storageType, key) {
     if (!this.validStorageTypes.includes(storageType)) return null
     const cacheData = window[storageType].getItem(key)
     if (!cacheData) return null
     const parsedCacheData = JSON.parse(cacheData)
     const currentTime = new Date().getTime()
     if (currentTime < parsedCacheData.expire) {
       return parsedCacheData.token
     } else {
       window[storageType].removeItem(key)
     }
     return null
   },
   removeItem (storageType, key) {
     if (!this.validStorageTypes.includes(storageType)) return null
     window[storageType].removeItem(key)
   }
 }

localStorage、sessionStorage的引入确实给数据缓存带来了诸多便利，但安全问题不容忽视，存放数据时建议做安全加密处理，后续有时间展开讨论