vue localStorage 过期时间
时间: 2023-10-14 09:30:19 浏览: 58
在 Vue 中使用 localStorage 存储数据时,可以通过设置过期时间来控制数据的有效期。实现的方式有多种,其中一种比较简单的方式是在存储数据时,同时存储一个过期时间,然后在获取数据时判断当前时间是否超过了过期时间,如果超过了就认为数据已过期,需要清除。
以下是一个示例代码:
```javascript
// 存储数据时设置过期时间,单位为毫秒
localStorage.setItem('key', JSON.stringify({
value: 'data',
expire: new Date().getTime() + 1000 * 60 * 60 // 过期时间为1小时
}))
// 获取数据时判断是否过期
const data = JSON.parse(localStorage.getItem('key'))
if (data && data.expire > new Date().getTime()) {
// 数据未过期,可以使用
console.log(data.value)
} else {
// 数据已过期,需要清除
localStorage.removeItem('key')
}
```
在上述示例中,我们将数据和过期时间一起存储在 localStorage 中,并且过期时间设置为 1 小时后。在获取数据时,我们首先从 localStorage 中获取数据,并判断数据是否存在以及是否过期。如果数据未过期,就可以使用其中的 value 值;如果数据已过期,我们则移除该数据。