在前端开发中，localStorage 是一种常用的客户端存储方式，但其默认不支持过期时间功能。以下介绍几种实现 localStorage 过期时间的方法。

方法 1: 封装 localStorage

通过封装 localStorage，在存储数据时加入过期时间。

const setWithExpires = (key, value, expires) => {
   const data = {
       value: value,
       expires: Date.now() + expires // 设置过期时间
   };
   localStorage.setItem(key, JSON.stringify(data));
};
const getWithExpires = (key) => {
   const value = localStorage.getItem(key);
   if (!value) return null;
   const data = JSON.parse(value);
   if (Date.now() > data.expires) {
       localStorage.removeItem(key); // 数据过期，删除
       return null;
   }
   return data.value; // 返回未过期的数据
};
// 示例
setWithExpires('name', 'Alice', 5000); // 存储数据，有效期5秒
console.log(getWithExpires('name')); // 获取数据

方法 2: 使用键值存储过期时间

将过期时间直接存储在键值中，通过解析判断是否有效。

const setItemWithExpire = (key, value, expireTime) => {
   const expireKey = `${key}|${Date.now() + expireTime}`;
   localStorage.setItem(expireKey, value);
};
const getItemWithExpire = (key) => {
   const keys = Object.keys(localStorage).find(k => k.startsWith(`${key}|`));
   if (!keys) return null;
   const [_, expire] = keys.split('|');
   if (Date.now() > parseInt(expire)) {
       localStorage.removeItem(keys); // 删除过期数据
       return null;
   }
   return localStorage.getItem(keys);
};
// 示例
setItemWithExpire('user', 'Bob', 3000); // 存储数据，有效期3秒
console.log(getItemWithExpire('user')); // 获取数据

方法 3: 使用第三方工具库

使用封装好的工具库（如 xijs）简化操作。

import { store } from 'xijs';
// 设置带有过期时间的 key
store.set('name', 'Charlie', Date.now() + 1000);
// 获取数据
console.log(store.get('name')); // 未过期返回值，过期返回 null

总结

• 封装方法适合自定义需求，灵活性高。

• 键值存储法简单易用，但管理复杂度较高。

• 工具库适合快速开发，减少重复工作。

• 根据实际需求选择合适的实现方式。

来源Bing