点击右上方红色按钮关注“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秒后获取,就是空的了
喜欢小编或者觉得小编文章对你有帮助的,可以点击一波关注哦!