uni-app分享一个cache方案，可以指定缓存时间

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app分享一个cache方案，可以指定缓存时间

具体使用方法 看代码。

/**
 * 缓存数据优化
 * var cache = require('utils/cache.js');
 * import cache from '../cache'
 * 使用方法 【
 *     一、设置缓存
 *         string    cache.put('k', 'string你好啊');
 *         json      cache.put('k', { "b": "3" }, 2);
 *         array     cache.put('k', [1, 2, 3]);
 *         boolean   cache.put('k', true);
 *     二、读取缓存
 *         默认值    cache.get('k')
 *         string    cache.get('k', '你好')
 *         json      cache.get('k', { "a": "1" })
 *     三、移除/清理    
 *         移除: cache.remove('k');
 *         清理：cache.clear();
 * 】
 * @type {String}
 */
var postfix = '_aszapp'; // 缓存前缀

/**
 * 设置缓存   
 * @param  {[type]} k [键名]
 * @param  {[type]} v [键值]
 * @param  {[type]} t [时间、单位秒]
 */
function put(k, v, t) {
    uni.setStorageSync(k, v)
    var seconds = parseInt(t);
    if (seconds > 0) {
        var timestamp = Date.parse(new Date());
        timestamp = timestamp / 1000 + seconds;
        uni.setStorageSync(k + postfix, timestamp + "")
    } else {
        uni.removeStorageSync(k + postfix)
    }
}

/**
 * 获取缓存   
 * @param  {[type]} k   [键名]
 * @param  {[type]} def [获取为空时默认]
 */
function get(k, def) {
    var deadtime = parseInt(uni.getStorageSync(k + postfix))
    if (deadtime) {
        if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
            if (def) {
                return def;
            } else {
                return false;
            }
        }
    }
    var res = uni.getStorageSync(k);
    if (res) {
        return res;
    } else {
        if (def == undefined || def == "") {
            def = false;
        }
        return def;
    }
}

function remove(k) {
    uni.removeStorageSync(k);
    uni.removeStorageSync(k + postfix);
}

/**
 * 清理所有缓存
 * @return {[type]} [description]
 */
function clear() {
    uni.clearStorageSync();
}

module.exports = {
    put: put,
    get: get,
    remove: remove,
    clear: clear,
}
开发环境 版本号 项目创建方式
Node.js 未提及 未提及

Harmonyos Next教程
1 回复

在uni-app中实现一个带缓存时间管理的方案，你可以利用JavaScript的localStorage或sessionStorage，并结合时间戳来实现。为了更灵活地管理缓存，我们可以封装一个简单的缓存工具类。下面是一个具体的实现案例，它允许你指定缓存时间，并在读取缓存时自动检查是否过期。

缓存工具类实现

首先，创建一个名为cacheUtil.js的文件，并在其中实现缓存工具类：

// cacheUtil.js
const CACHE_PREFIX = 'uni-app-cache:';

class CacheUtil {
    static set(key, value, ttl = 7200000) { // 默认缓存2小时 (7200000毫秒)
        const now = Date.now();
        const cacheObj = {
            value,
            expire: now + ttl
        };
        localStorage.setItem(CACHE_PREFIX + key, JSON.stringify(cacheObj));
    }

    static get(key) {
        const cacheStr = localStorage.getItem(CACHE_PREFIX + key);
        if (!cacheStr) {
            return null;
        }
        const cacheObj = JSON.parse(cacheStr);
        const now = Date.now();
        if (now > cacheObj.expire) {
            localStorage.removeItem(CACHE_PREFIX + key); // 缓存过期，删除
            return null;
        }
        return cacheObj.value;
    }

    static remove(key) {
        localStorage.removeItem(CACHE_PREFIX + key);
    }
}

export default CacheUtil;

使用示例

在你的uni-app项目中，你可以这样使用这个缓存工具类：

// main.js 或其他组件中
import CacheUtil from '@/utils/cacheUtil.js'; // 根据你的项目结构调整路径

// 设置缓存，指定缓存时间为1小时（3600000毫秒）
CacheUtil.set('userData', { name: '张三', age: 30 }, 3600000);

// 获取缓存数据
const userData = CacheUtil.get('userData');
if (userData) {
    console.log('缓存数据:', userData);
} else {
    console.log('缓存数据已过期或不存在');
}

// 移除缓存
CacheUtil.remove('userData');

总结

以上代码提供了一个简单的缓存工具类，它允许你设置缓存数据并指定缓存时间。当尝试获取缓存数据时，工具类会自动检查数据是否过期。如果过期，它将返回null并从存储中删除该缓存项。这个方案可以很容易地集成到uni-app项目中，帮助管理应用中的数据缓存。

回到顶部