本文介绍前端实现数据缓存定时失效的两种常用方案。针对大数据量场景，通过LocalStorage存储数据并附加时间戳，在读取时比对当前时间以判断是否过期；针对小数据量场景，利用js-cookie库封装设置任意单位（如秒）的Cookie有效期。文章提供了具体的代码封装示例与调用方法，帮助开发者灵活选择适合业务需求的缓存策略。
前端数据缓存定时失效方案：LocalStorage与js-cookie实战
一、背景
业务场景中常需在前端进行数据缓存，并在缓存到期后自动删除旧数据，进而重新获取最新数据。
二、实现过程
在前端实现数据定时失效主要有以下两种方法：
1、当数据量较大时，可利用localStorage，在存储数据时写入一个时间戳，获取数据时再与当前系统时间进行比较判断是否过期。 2、如果数据量不超过cookie的限制大小，利用cookie更为便捷，直接设置有效期即可。 3、其他方法（欢迎补充）
利用localstorage实现数据过期处理
利用localstorage实现
localstorage实现思路：
1、存储数据时加上时间戳
在项目开发中，我们可以封装一个公用方法来在存储数据时自动添加时间戳。
export function setLocalStorageAndTime (key, value) {
window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
}
项目中应用
存储
// 有数据再进行存储
setLocalStorageAndTime('XXX', {name: 'XXX'})
读取
// 判断是否返回为null或者失效
getLocalStorageAndTime('XXX', 86400000)
2、获取数据时与当前时间进行比较
export function getLocalStorageAndTime (key, exp = 86400000) {
// 获取数据
let data = window.localStorage.getItem(key)
if (!data) return null
let dataObj = JSON.parse(data)
// 与过期时间比较
if (new Date().getTime() - dataObj.time > exp) {
// 过期删除返回null
removeLocalStorage(key)
console.log('信息已过期')
return null
} else {
return dataObj.data
}
}
利用js-cookie实现任意单位有效期
利用cookie实现
我们使用js-cookie这款插件来设置cookie，操作较为方便，开发者可自行查阅相关文档。
js-cookie 的示例中通常只支持以天为单位的有效期设置：
Cookies.set('name', 'value', { expires: 7 }); // 7 天后失效
官方文档默认仅支持设置天数，未直接提供时分秒选项，导致设置更小单位时较为棘手。实际上，通过设置时间戳即可处理任意单位的时间，下面这种方式可以灵活设置任意单位的有效期：
let seconds = 10;
let expires = new Date(new Date() * 1 + seconds * 1000);
Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效以下是利用js-cookie进行的封装代码，使用前请确保已执行 npm i js-cookie 安装依赖。
import Cookies from 'js-cookie'
/*
* 设置cookies
* */
export function getCookies (key) {
return Cookies.get(key)
}
/*
* 设置Cookies
* */
export function setCookies (key, value, expiresTime) {
let seconds = expiresTime
let expires = new Date(new Date() * 1 + seconds * 1000)
return Cookies.set(key, value, { expires: expires })
}
/*
* 移除Cookies
* */
export function removeCookies (key) {
return Cookies.remove(key)
}
三、总结
上述两种方法各有优劣，如果各位有更好的实现方案，欢迎留言交流互相学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。