基于ts的浏览器缓存工具封装（含源码）

浏览器缓存工具封装

在前端开发中，经常会遇到需要缓存数据的情况，例如保存用户的登录状态、缓存部分页面数据等

• 但有时候需要缓存一些复杂的对象，例如用户信息对象、设置配置等。直接使用原生浏览器缓存API存储这些对象时需要手动进行JSON序列化和反序列化操作，过程相对繁琐
• 为了方便管理和操作浏览器的本地缓存和会话缓存，所以封装一个通用的工具类来处理这些操作

实现

创建了一个名为Cache的工具类，该类具有以下方法：

• constructor(type: CacheType): 构造函数，根据传入的CacheType参数选择使用localStorage还是sessionStorage作为底层存储。
• setCache(key: string, value: any): 将指定的键值对存储到缓存中。如果value不为空，则将其转换为JSON字符串并存储。
• getCache(key: string): 根据键获取缓存中存储的值。如果值存在，则将其解析为对应的JSON对象并返回。
• removeCache(key: string): 根据键从缓存中移除相应的数据。
• clear(): 清空缓存中的所有数据。

定义了一个枚举类型CacheType，用于表示缓存类型，包括Local和Session。

使用方法示例

import { localCache, sessionCache } from 'cache.ts';

// 存储数据到本地缓存
localCache.setCache('username', 'John Doe');
sessionCache.setCache('isLoggedIn', true);

// 从本地缓存获取数据
const username = localCache.getCache('username'); // 'John Doe'
const isLoggedIn = sessionCache.getCache('isLoggedIn'); // true

// 移除数据
localCache.removeCache('username');
sessionCache.removeCache('isLoggedIn');

// 清空整个缓存
localCache.clear();
sessionCache.clear();

使用案例代码解析：

1. 首先直接导入了封装的cache.ts工具类中的localCache和sessionCache实例。这些实例已经预先配置好了，无需再次手动构造。

2. 接下来，通过调用setCache方法向本地缓存和会话缓存中存储数据。例如，我们使用localCache.setCache(‘username,John Doe’)`将用户名信息存储到本地缓存中，sessionCache.setCache(‘isLoggedIn’, true)将登录状态存储到会话缓存中。

3. 然后，通过调用getCache方法从缓存中获取数据。例如，使用localCache.getCache(‘username’)可以获取存储在本地缓存中的用户名信息，并将其赋值给变量username。类似地，使用sessionCache.getCache(‘isLoggedIn’)可以获取存储在会话缓存中的登录状态，并赋值给变量isLoggedIn。

4. 如果需要移除特定的缓存数据，可以使用removeCache方法。通过传入相应的键，例如localCache.removeCache('username')，我们可以将存储在本地缓存中的用户名信息移除。

5. 如果希望清除整个缓存，可以使用clear方法。例如，通过调用localCache.clear()，可以清空本地缓存中的所有数据。类似地，使用sessionCache.clear()可以清空会话缓存。

代码

enum CacheType {
  Local,
  Session
}

class Cache {
  storage: Storage

  constructor(type: CacheType) {
    this.storage = type === CacheType.Local ? localStorage : sessionStorage
  }

  setCache(key: string, value: any) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getCache(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }

  removeCache(key: string) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }
}

const localCache = new Cache(CacheType.Local)
const sessionCache = new Cache(CacheType.Session)

export { localCache, sessionCache }