前端如何通过设置失效时间清除本地存储的数据？

在前端开发里，你可以通过给本地存储的数据添加一个失效时间，在读取数据时检查其是否过期，若过期就将其清除。以下是具体的实现步骤和示例代码：

实现思路

1. 存储数据：在存储数据时，同时记录当前时间和设定的失效时间。
2. 读取数据：读取数据时，检查当前时间是否超过失效时间，若超过则清除数据。

示例代码

// 存储数据并设置失效时间
function setLocalStorageWithExpiry(key, value, expirationMinutes) {
    const now = new Date();
    const expirationTime = now.getTime() + expirationMinutes * 60 * 1000;
    const item = {
        value: value,
        expiration: expirationTime
    };
    localStorage.setItem(key, JSON.stringify(item));
}

// 获取数据并检查是否过期
function getLocalStorageWithExpiry(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) {
        return null;
    }
    const item = JSON.parse(itemStr);
    const now = new Date();
    if (now.getTime() > item.expiration) {
        // 数据已过期，清除数据
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
}

// 使用示例
// 存储数据，设置失效时间为 5 分钟
setLocalStorageWithExpiry('myData', '这是示例数据', 5);

// 获取数据
const data = getLocalStorageWithExpiry('myData');
if (data) {
    console.log('数据存在:', data);
} else {
    console.log('数据已过期或不存在');
}

代码解释

• setLocalStorageWithExpiry 函数：用于存储数据，同时将失效时间也存进本地存储。
• getLocalStorageWithExpiry 函数：用于读取数据，检查是否过期，若过期则清除数据并返回 null。

你可以按照自身需求对 expirationMinutes 参数进行调整，从而设定不同的失效时间。