js的缓存工具

admin3周前实践出真知22

项目中用到的一个localStorage工具,可以用于token存储、数据缓存,支持过期,使用起来简答快捷


JavaScript版

const DEFAULT_EXPIRE = 7200; // 默认存储时间(秒)

const cache = {
    /**
     * 设置缓存
     * @param {string} key 存储的键
     * @param {any} value 存储的值
     * @param {number} [expire=DEFAULT_EXPIRE] 过期时间(秒),默认 7200s
     */
    set: (key, value, expire = DEFAULT_EXPIRE) => {
        const expireTimestamp = Date.now() + expire * 1000;
        const cacheData = { data: value, expireTimestamp };
        localStorage.setItem(key, JSON.stringify(cacheData));
    },

    /**
     * 获取缓存
     * @param {string} key 存储的键
     * @param {any} [defaultValue=null] 如果缓存不存在,返回的默认值
     * @returns {any|null} 获取到的数据,或者默认值
     */
    get: (key, defaultValue = null) => {
        const item = localStorage.getItem(key);
        if (!item) return defaultValue;

        try {
            const cacheData = JSON.parse(item);
            if (Date.now() > cacheData.expireTimestamp) {
                cache.remove(key); // 过期后删除
                return defaultValue;
            }
            return cacheData.data;
        } catch (error) {
            console.error("解析缓存数据失败:", error);
            cache.remove(key);
            return defaultValue;
        }
    },

    /**
     * 删除缓存
     * @param {string} key 存储的键
     */
    remove: (key) => {
        localStorage.removeItem(key);
    },

    /**
     * 清空所有缓存
     */
    clear: () => {
        localStorage.clear();
    }
};

export default cache;


typeScript版

const DEFAULT_EXPIRE = 7200; // 默认存储时间(秒)

interface CacheData<T> {
    data: T;
    expireTimestamp: number;
}

const cache = {
    /**
     * 设置缓存
     * @param key 存储的键
     * @param value 存储的值
     * @param expire 过期时间(秒),默认 7200s
     */
    set: <T>(key: string, value: T, expire: number = DEFAULT_EXPIRE) => {
        const expireTimestamp = Date.now() + expire * 1000;
        const cacheData: CacheData<T> = { data: value, expireTimestamp };
        localStorage.setItem(key, JSON.stringify(cacheData));
    },

    /**
     * 获取缓存
     * @param key 存储的键
     * @param defaultValue 如果缓存不存在,返回的默认值
     * @returns T | null
     */
    get: <T>(key: string, defaultValue: T | null = null): T | null => {
        const item = localStorage.getItem(key);
        if (!item) return defaultValue;

        try {
            const cacheData: CacheData<T> = JSON.parse(item);
            if (Date.now() > cacheData.expireTimestamp) {
                cache.remove(key); // 过期后删除
                return defaultValue;
            }
            return cacheData.data;
        } catch (error) {
            console.error("解析缓存数据失败:", error);
            cache.remove(key);
            return defaultValue;
        }
    },

    /**
     * 删除缓存
     * @param key 存储的键
     */
    remove: (key: string) => {
        localStorage.removeItem(key);
    },

    /**
     * 清空所有缓存
     */
    clear: () => {
        localStorage.clear();
    }
};

export default cache;


返回列表

上一篇:linux下利用nc监听端口的玩法

没有最新的文章了...

相关文章

openfeign在单体项目用法

公司项目需要与其他系统对接,常规的httpClient写法,不符合我大道至简的理念,于是研究了一下openfeign,本文只是提供一个思路,具体还需要根据实际场景进行完善。一、加入依赖我使用的spri...

记录一次docker安装mysql8.3

配置文件 /data/mysql8-data/conf/my.cnf[mysql] # 设置mysql控制台默认字符集 default-character-set=utf8mb4 #&...

安卓调用webview中iframe定义方法(适用于数据回调给webview)

首先在html中用js获取到当前页面的层级//递归获取当前嵌套在iframe页面的层级位置     function getSelfWindowPa...

ubuntu通过docker-compose更快的迁移我的博客

安装dcoker方式移步 记一次博客的迁移(Ubuntu安装docker部署博客)安装docker-composewget https://github.com/docker/co...

关于时间的处理(时间范围生成,mysql按照天,周,月统计)

mysql的查询语句 #周  select FROM_UNIXTIME(create_time,'%Y%u') weeks,count(cas...

linux下利用nc监听端口的玩法

ubuntu/debian开机启动设置,移步这里家里有一些小服务器玩具,由于家里网络都是dhcp获取ip地址,ip地址可能会出现变动。那么如果在服务器上监听一个特殊端口,通过内网扫描指定的特殊端口,即...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。