点击右上方红色按钮关注“web秀”，让你真正秀起来

使用过localStorage的小伙伴都知道，localStorage本身没有时间过期的功能，那么如何实现localStorage过期功能呢？

思路

1、使用localStorage时，设置一个定时器，比如10分钟后过期，那就十分钟后清除localStorage。但是面临的问题是，如果浏览器关闭，定时器也就失效。如果解决呢？

10分钟后过期，那就知道了截至时间，每次打开网址，就去检测当前时间是否超过了截至时间，没有就重新开启定时器，如果超过，直接清除localStorage。

2、有了思路一，发现定时器并没有什么用。所以，使用localStorage.setItem时，并存入截至时间，每次localStorage.getItem时，校验当前时间是否超过了截至时间，如果超过，直接清除localStorage。

下面我们用代码，看看如何实现

代码实现

(function () {
  var getItem = localStorage.getItem.bind(localStorage)
  var setItem = localStorage.setItem.bind(localStorage)
  var removeItem = localStorage.removeItem.bind(localStorage)
  localStorage.getItem = function (keyName) {
    var expires = getItem(keyName + '_expires')
    if (expires && new Date() > new Date(Number(expires))) {
      removeItem(keyName)
      removeItem(keyName + '_expires')
    }
    return getItem(keyName)
  }
  localStorage.setItem = function (keyName, keyValue, expires) {
    if (typeof expires !== 'undefined') {
      var expiresDate = new Date(expires).valueOf()
      setItem(keyName + '_expires', expiresDate)
    }
    return setItem(keyName, keyValue)
  }
})()

重写localStorage.setItem()，localStorage.getItem()方法，setItem()时，并存入expires截至时间，getItem()时，判断截至时间和当前时间，超过即清除。

调用示例：

localStorage.setItem('key', 'value', new Date() + 10000) // 10 秒钟后过期
localStorage.getItem('key') // 10秒后获取，就是空的了

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！