localStorage及sessionStorage自定义过期时间方法实现

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

Tags：localstorage

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。