如何通过设置失效时间清除本地存储的数据
一、使用`localStorage`和时间戳（JavaScript）
1. 原理
`localStorage`是浏览器提供的一种在本地存储数据的方式，数据没有过期时间限制。但是可以通过自己记录时间戳来模拟数据过期的功能。在存储数据时，同时存储一个时间戳，表示数据的存储时间。当读取数据时，检查当前时间与存储时间的差值，如果超过了设定的失效时间，就清除该数据。
2. 示例代码
存储数据并设置失效时间（以存储一个用户信息对象为例）：
function setDataWithExpiry(key, value, ttl) {
const now = new Date();
const item = {
value: value,
expiry: now.getTime() + ttl,
};
localStorage.setItem(key, JSON.stringify(item));
}
// 存储一个用户对象，设置失效时间为1小时（1 * 60 * 60 * 1000毫秒）
const user = { name: "John", age: 30 };
setDataWithExpiry("user", user, 1 * 60 * 60 * 1000);读取数据并检查失效时间：
function getData(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) {
return null;
}
const item = JSON.parse(itemStr);
const now = new Date();
if (now.getTime() > item.expiry) {
localStorage.removeItem(key);
return null;
}
return item.value;
}
const user = getData("user");
if (user) {
console.log("用户信息有效：", user);
} else {
console.log("用户信息已过期或不存在");
}二、使用`sessionStorage`和定时器（JavaScript）
1. 原理
`sessionStorage`存储的数据在浏览器会话结束时会自动清除。可以结合定时器来提前清除数据。当存储数据时，同时启动一个定时器，定时器的时间为设定的失效时间，时间一到就清除存储的数据。
2. 示例代码
存储数据并设置定时器（以存储一个消息为例）：
function setDataWithTimer(key, value, ttl) {
sessionStorage.setItem(key, value);
setTimeout(() => {
sessionStorage.removeItem(key);
}, ttl);
}
// 存储一个消息，设置失效时间为30分钟（30 * 60 * 1000毫秒）
setDataWithTimer("message", "这是一个重要消息", 30 * 60 * 1000);读取数据（注意没有过期检查，因为定时器会自动清除）：
function getData(key) {
return sessionStorage.getItem(key);
}
const message = getData("message");
if (message) {
console.log("消息：", message);
} else {
console.log("消息不存在");
}