酷秀博客
首页/js的缓存工具教程

js的缓存工具

admin的头像admin4个月前教程128热度

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

JavaScript版

const DEFAULT_EXPIRE = 7200; // 默认存储时间(秒)<br />
<br />
const cache = {<br />
    /**<br />
     * 设置缓存<br />
     * @param {string} key 存储的键<br />
     * @param {any} value 存储的值<br />
     * @param {number} [expire=DEFAULT_EXPIRE] 过期时间(秒),默认 7200s<br />
     */<br />
    set: (key, value, expire = DEFAULT_EXPIRE) => {<br />
        const expireTimestamp = Date.now()   expire * 1000;<br />
        const cacheData = { data: value, expireTimestamp };<br />
        localStorage.setItem(key, JSON.stringify(cacheData));<br />
    },<br />
<br />
    /**<br />
     * 获取缓存<br />
     * @param {string} key 存储的键<br />
     * @param {any} [defaultValue=null] 如果缓存不存在,返回的默认值<br />
     * @returns {any|null} 获取到的数据,或者默认值<br />
     */<br />
    get: (key, defaultValue = null) => {<br />
        const item = localStorage.getItem(key);<br />
        if (!item) return defaultValue;<br />
<br />
        try {<br />
            const cacheData = JSON.parse(item);<br />
            if (Date.now() > cacheData.expireTimestamp) {<br />
                cache.remove(key); // 过期后删除<br />
                return defaultValue;<br />
            }<br />
            return cacheData.data;<br />
        } catch (error) {<br />
            console.error("解析缓存数据失败:", error);<br />
            cache.remove(key);<br />
            return defaultValue;<br />
        }<br />
    },<br />
<br />
    /**<br />
     * 删除缓存<br />
     * @param {string} key 存储的键<br />
     */<br />
    remove: (key) => {<br />
        localStorage.removeItem(key);<br />
    },<br />
<br />
    /**<br />
     * 清空所有缓存<br />
     */<br />
    clear: () => {<br />
        localStorage.clear();<br />
    }<br />
};<br />
<br />
export default cache;<br />
```<br />
typeScript版<br />
<br />
```javascript<br />
const DEFAULT_EXPIRE = 7200; // 默认存储时间(秒)<br />
<br />
interface CacheData<T> {<br />
    data: T;<br />
    expireTimestamp: number;<br />
}<br />
<br />
const cache = {<br />
    /**<br />
     * 设置缓存<br />
     * @param key 存储的键<br />
     * @param value 存储的值<br />
     * @param expire 过期时间(秒),默认 7200s<br />
     */<br />
    set: <T>(key: string, value: T, expire: number = DEFAULT_EXPIRE) => {<br />
        const expireTimestamp = Date.now()   expire * 1000;<br />
        const cacheData: CacheData<T> = { data: value, expireTimestamp };<br />
        localStorage.setItem(key, JSON.stringify(cacheData));<br />
    },<br />
<br />
    /**<br />
     * 获取缓存<br />
     * @param key 存储的键<br />
     * @param defaultValue 如果缓存不存在,返回的默认值<br />
     * @returns T | null<br />
     */<br />
    get: <T>(key: string, defaultValue: T | null = null): T | null => {<br />
        const item = localStorage.getItem(key);<br />
        if (!item) return defaultValue;<br />
<br />
        try {<br />
            const cacheData: CacheData<T> = JSON.parse(item);<br />
            if (Date.now() > cacheData.expireTimestamp) {<br />
                cache.remove(key); // 过期后删除<br />
                return defaultValue;<br />
            }<br />
            return cacheData.data;<br />
        } catch (error) {<br />
            console.error("解析缓存数据失败:", error);<br />
            cache.remove(key);<br />
            return defaultValue;<br />
        }<br />
    },<br />
<br />
    /**<br />
     * 删除缓存<br />
     * @param key 存储的键<br />
     */<br />
    remove: (key: string) => {<br />
        localStorage.removeItem(key);<br />
    },<br />
<br />
    /**<br />
     * 清空所有缓存<br />
     */<br />
    clear: () => {<br />
        localStorage.clear();<br />
    }<br />
};<br />
<br />
export default cache;<br />
签名: 最忠诚的BUG开发者来自: 重庆市. Chrome浏览器
文章目录