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

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

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

（环境说明：node.js/javascript开发环境）

// 核心思想是将value以对象字符串的形式存放 提取时parse成对象再进行后续处理export const webStorage = {  validStorageTypes: ['sessionStorage', 'localStorage'],  setItem (storageType, key, token, userinfo, duration = 86400000) {    if (!this.validStorageTypes.includes(storageType)) return null    const obj = {      token: token,      userinfo: userinfo,      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的引入确实给数据缓存带来了诸多便利，但安全问题不容忽视，存放数据时建议做安全加密处理，后续有时间展开讨论。

支付宝打赏

微信打赏

留言与评论（共有 0 条评论） “”

验证码：