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