如何在uniapp中设置缓存数据的过期时间？

Question

在 UniApp 中，使用 `uni.setStorageSync` 或 `uni.setStorage` 可以实现本地数据缓存，但这些方法本身不支持设置缓存过期时间。常见问题是：**如何在 UniApp 中为缓存数据设置过期时间？** 实现方式通常是将数据写入时同时记录时间戳，在读取时判断是否已过期。此外，也可以封装一个带过期机制的缓存工具类，结合本地存储与时间戳验证，实现灵活的缓存管理。此方法适用于需要定时刷新或清理的缓存场景，如用户登录信息、接口缓存等。

Answer 1

一、理解 UniApp 本地存储机制

在 UniApp 中，本地数据缓存通常使用 uni.setStorageSync 或 uni.setStorage 方法实现。这些方法基于小程序平台的本地存储机制，提供同步与异步的写入方式。然而，它们本身不支持设置缓存过期时间。

例如，以下代码是典型的同步写入方式：

uni.setStorageSync('user', { name: 'Tom', id: 1 });

若需实现缓存失效机制，开发者必须自行设计时间戳逻辑，结合读取时的判断处理。

二、缓存过期机制的基本实现原理

为了实现缓存过期机制，通常的做法是：

• 在写入缓存时，同时记录一个时间戳（如当前时间）；
• 在读取缓存时，比较当前时间与记录时间戳的差值，判断是否超过设定的过期时间；
• 若已过期，则清除缓存或重新获取数据。

例如，缓存写入时添加时间戳：

const cacheData = {
    data: { name: 'Jerry', id: 2 },
    timestamp: Date.now()
};
uni.setStorageSync('userCache', cacheData);

三、封装带过期机制的缓存工具类

为了提高代码复用性和可维护性，建议封装一个缓存管理工具类，统一处理缓存写入、读取和过期判断。

以下是一个简单的缓存工具类实现：

class CacheManager {
    constructor(expireTime = 1000 * 60 * 5) { // 默认5分钟
        this.expireTime = expireTime;
    }

    set(key, data) {
        const cache = {
            data,
            timestamp: Date.now()
        };
        uni.setStorageSync(key, cache);
    }

    get(key) {
        const cache = uni.getStorageSync(key);
        if (!cache || !cache.timestamp) return null;

        const now = Date.now();
        if (now - cache.timestamp > this.expireTime) {
            uni.removeStorageSync(key);
            return null;
        }
        return cache.data;
    }
}

使用方式如下：

const userCache = new CacheManager(1000 * 60 * 10); // 设置缓存10分钟
userCache.set('userInfo', { name: 'Alice' });
const userInfo = userCache.get('userInfo');

四、应用场景与扩展建议

该机制适用于多种缓存场景，包括但不限于：

场景	说明
用户登录信息	如 token、用户信息等短期有效的数据
接口数据缓存	如商品列表、配置信息等可定时刷新的数据
页面状态缓存	保存页面滚动位置、表单状态等临时信息

未来可扩展的方向包括：

• 支持异步缓存（使用 uni.setStorage）；
• 支持缓存策略（如 LRU 缓存淘汰机制）；
• 结合本地数据库如 SQLite 或 IndexedDB 提升性能。

五、流程图展示缓存处理逻辑

以下是缓存读取和判断的流程图：

graph TD
            A[开始读取缓存] --> B{缓存是否存在?}
            B -- 否 --> C[返回 null]
            B -- 是 --> D{是否过期?}
            D -- 否 --> E[返回缓存数据]
            D -- 是 --> F[清除缓存并返回 null]