uni-app缓存器的封装

在前端开发应用程序中，性能一直都是被大家所重视的一点，然而判断一个应用程序的性能最直观的就是看页面打开的速度。其中提高页页面反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短页面请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

前端工程中往往也会面对多端情况，例如在uni-app中，开发中会同时针对h5、ios和安卓进行开发，在uni-app中缓存方法及对应的方法名可能存在一定的差异，通过对前端缓存方法的封装和整理，可以通过调用对应环境的封装后方法，以增加代码的可读性，并且可以同时对不同环境下的缓存方法进行监听。

缓存封装方法：

/**
 * 根据传入的key，获取缓存中对应的value
 * @param {*} key 缓存的key
 * @returns 返回缓存中的value
 */
const getValue = (key) => {
    if (!key) {
        return;
    }
    if (uni.getStorageSync) {
        return uni.getStorageSync(key);
    } else if (uni.getStorageInfoSync) {
        const storageInfo = uni.getStorageInfoSync();
        const keys = storageInfo.keys;
        if (keys && keys.length > 0) {
            for (let i = 0; i < keys.length; i++) {
                if (keys[i] === key) {
                    return uni.getStorageSync(keys[i]);
                }
            }
        }
    }
};

/**
 * 设置缓存中的key对应的value
 * @param {*} key 缓存的key
 * @param {*} value 缓存的value
 */
const setValue = (key, value) => {
    if (!key) {
        return;
    }
    if (uni.setStorageSync) {
        uni.setStorageSync(key, value);
    } else if (uni.setStorage) {
        uni.setStorage({
            key,
            value,
            success: (res) => {},
        });
    }
};

/**
 * 移除缓存中的指定key
 * @param {*} key 缓存的key
 */
const removeValue = (key) => {
    if (!key) {
        return;
    }
    if (uni.removeStorageSync) {
        uni.removeStorageSync(key);
    } else if (uni.removeStorage) {
        uni.removeStorage({
            key,
            success: (res) => {},
        });
    }
};

/**
 * 清除缓存中的所有值
 */
const clear = () => {
    if (uni.clearStorageSync) {
        uni.clearStorageSync();
    } else if (uni.clearStorage) {
        uni.clearStorage({
            success: (res) => {},
        });
    }
};

对不同环境缓存方法的监听：

// 定义监听缓存变化的函数
const watchStorageChange = (callback) => {
    if (uni.getStorageChanges) {
        uni.getStorageChanges({
            success: (res) => {
                callback(res);
            },
        });
    } else {
        // 如果不支持监听缓存变化，则直接返回
        return;
    }
};

调用方式：

watchStorageChange((res) => {
    // 处理缓存变化
    console.log(res);
});