使用过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秒后获取，就是空的了

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