一、使用`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("消息不存在");}