Vue3设置localStorage存储时间为10天

在Vue3中，设置localStorage的存储时间通常需要手动计算过期时间，并在存储数据时将其作为一个属性保存起来。以下是一个简单的示例来说明如何设置localStorage存储时间为10天：

首先，你需要获取当前时间，然后加上10天的时间间隔，得到一个过期时间点。之后，将当前时间以及过期时间点都转换成时间戳格式。存储数据时，将原始数据和这两个时间戳都保存到localStorage中。当需要检查数据是否过期时，可以从localStorage中读取这些时间戳并与当前时间进行比较。

import { ref } from 'vue';

// 设置localStorage存储时间为10天
function setLocalStorageWithExpiry(key, value) {
    const now = new Date();
    const expiryDate = new Date(now.getTime() + 10 * 24 * 60 * 60 * 1000); // 10天后的时间

    const item = {
        value: value,
        expiry: expiryDate.getTime(),
        time: now.getTime()
    };

    localStorage.setItem(key, JSON.stringify(item));
}

// 获取localStorage数据，并检查是否过期
function getLocalStorage(key) {
    const itemStr = localStorage.getItem(key);
    const item = JSON.parse(itemStr);

    const now = new Date();

    // 检查是否过期
    if (now.getTime() > item.expiry) {
        // 数据已过期，可以删除它
        localStorage.removeItem(key);
        return null;
    } else {
        // 数据未过期，返回原始值
        return item.value;
    }
}

// 使用setLocalStorageWithExpiry和getLocalStorage来设置和获取带过期时间的localStorage数据。

请注意，在实际应用中，你可能需要根据实际情况调整上述示例代码，例如处理存储对象、数组等复杂数据类型的情况。