前端实现设置缓存数据定时失效

一、背景

业务需要在前端进行数据的缓存，到期就删除再进行获取新数据。

二、实现过程

前端设置数据定时失效的可以有下面2种方法：

1、当数据较大时，可以利用localstorage，存数据时候写入一个时间，获取的时候再与当前时间进行比较

2、如果数据不超过cookie的限制大小，可以利用cookie比较方便，直接设置有效期即可。

3、更多（请大神指点）

利用localstorage实现

localstorage实现思路：

1、存储数据时加上时间戳

在项目开发中，我们可以写一个公用的方法来进行存储的时候加上时间戳

export function setLocalStorageAndTime (key, value) {
  window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
}
复制代码

项目中应用

存储