localStorage缓存设置过期时间

2021-05-24
100
193

前言

Web客户端缓存的方法可以通过localStorage、sessionStorage、cookie等。sessionStorage的生命周期仅在浏览器窗口关闭前有效,类似于临时会话的形式,而且即便同域,在不同标签下数据也无法互通。而cookie的存储空间又相当有限,每个域约4kb左右。只有localStorage存储空间大,同浏览器同域数据共享。缺点是存储周期是永久,只能手动清除。不能像cookie那样可以直接设置过期时间。但是可以通过二次封装原生API,实现过期时间的功能。

实现

class Storage {
  constructor(name) {
    this.name = name || 'storage'
  }
  //设置缓存
  setItem(params) {
    let obj = {
      key: '',
      value: '',
      expires: '',
      startTime: new Date().getTime(), //记录何时将值存入缓存,毫秒级
    }
    let options = {}
    //将obj和传进来的params合并
    Object.assign(options, obj, params)
    if (options.expires) {
      //如果options.expires设置了的话 则以options.key为key,options为值放进去
      localStorage.setItem(options.key, JSON.stringify(options))
    } else {
      //如果options.expires没有设置,就判断一下value的类型
      let type = Object.prototype.toString.call(options.value)
      //如果value是对象或者数组对象的类型,就先用JSON.stringify转一下,再存进去
      if (
        Object.prototype.toString.call(options.value) ==
        '[object Object]'
      ) {
        options.value = JSON.stringify(options.value)
      }
      if (
        Object.prototype.toString.call(options.value) ==
        '[object Array]'
      ) {
        options.value = JSON.stringify(options.value)
      }
      localStorage.setItem(options.key, options.value)
    }
  }
  //拿到缓存
  getItem(key) {
    let item = localStorage.getItem(key)
    if (!item) return null
    //先将拿到的试着进行json转为对象的形式
    try {
      item = JSON.parse(item)
    } catch (error) {
      //如果不行就不是json的字符串,就直接返回
      item = item
    }
    //如果有startTime的值,说明设置了失效时间
    if (item.startTime) {
      let date = new Date().getTime()
      //何时将值取出减去刚存入的时间,与item.expires比较,如果大于就是过期了,如果小于或等于就还没过期
      if (date - item.startTime > item.expires) {
        //缓存过期,清除缓存,返回false
        localStorage.removeItem(key)
        return null
      } else {
        //缓存未过期,返回值
        return item.value
      }
    } else {
      //如果没有设置失效时间,直接返回值
      return item
    }
  }
  //移除缓存
  removeItem(key) {
    localStorage.removeItem(key)
  }
  //移除全部缓存
  clear() {
    localStorage.clear()
  }
}

测试

const storage = new Storage()
storage.setItem({
  key: 'name',
  value: 'Pork',
  expires: 10 * 1000 // 10秒后过期
})

storage.getItem('name') // "Pork"
// Ten seconds later
storage.getItem('name') // null

这里实现的过期时间并不能像cookie那样到期后自动清除,而是在访问该key的时候如果当前时间超出设定时间,才会触发删除该数据的操作。如果想实现到期自动删除,还需不停使用循环读取所有缓存数据,进行时间判断,过期的执行删除操作。不管缓存数据量是大是小,都不推荐这么做,因为这将非常耗费性能。尽可能把清除操作放在一定条件下,而不是无限轮循中。

100

文章版权所有:PORK's BLOG,采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

欢迎分享,转载务必保留出处及原文链接