封装一个可以设置过期时间的localStorage存储函数

实现一个具有过期时间功能的localStorage存储函数，需要定义一个函数，它会将数据和过期时间一起存储在localStorage中。

下面是一个简单的实现示例：

javascript
/**
 * 设置带过期时间的localStorage
 * @param {string} key - 存储的键名
 * @param {*} value - 要存储的值，可以是任何可序列化的数据
 * @param {number} ttl - 过期时间（毫秒）
 */
function setLocalStorageWithExpiry(key, value, ttl) {
    const now = new Date();
    // 创建一个包含数据和过期时间的对象
    const item = {
        value: value,
        expiry: now.getTime() + ttl,
    };
    // 将对象序列化之后存储到localStorage中
    localStorage.setItem(key, JSON.stringify(item));
}

/**
 * 获取localStorage存储的值
 * @param {string} key - 存储的键名
 * @returns {*} 存储的值或者当值不存在或过期时返回null
 */
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.expiry) {
        // 如果已过期，删除存储并返回null
        localStorage.removeItem(key);
        return null;
    }
    // 如果未过期，返回存储的值
    return item.value;
}

// 示例使用
// 存储一个名为 'myData' 的数据，过期时间为1小时（3600000毫秒）
setLocalStorageWithExpiry('myData', { a: 1, b: 2 }, 3600000);

// 获取存储的数据
const myData = getLocalStorageWithExpiry('myData');
console.log(myData); // 如果还未过期，则会打印出存储的对象 { a: 1, b: 2 }

在这个封装的函数中，我们通过 setLocalStorageWithExpiry函数存储数据的时候，会额外添加一个过期时间戳到对象中，并将该对象序列化后保存在localStorage里。当通过 getLocalStorageWithExpiry函数获取数据的时候，我们会先检查当前时间是否已经超过了存储时设置的过期时间戳，如果已经过期，则从localStorage中删除该项，并返回 null；如果未过期，则返回保存的值。