resource-cache.ts — 资源缓存

文件: web/src/services/resource-cache.ts

职责

LRU（最近最少使用）缓存管理，用于缓存 Hanzi Writer 笔顺数据等高频资源。缓存持久化到 localStorage，页面刷新后恢复。

配置

配置项	值	说明
最大容量	50	缓存最多 50 个条目
存储键	tzxq_resource_cache	localStorage 键名
持久化延迟	500ms	防抖延迟，避免频繁写入

导出的实例

export const resourceCache = new LRUCache();

全局单例，通过 resourceCache 直接访问。

方法

get(key: string): any

获取缓存值。命中时将该条目移到最新位置（LRU 更新）。

• 参数: key — 缓存键
• 返回值: 缓存值，未命中返回 null

set(key: string, value: any): void

设置缓存值。若已存在则更新并移到最新位置；若容量已满则淘汰最旧条目。

• 参数: key — 缓存键; value — 缓存值

has(key: string): boolean

检查缓存键是否存在。

• 参数: key — 缓存键
• 返回值: true / false

clear(): void

清空所有缓存并持久化。

size(): number

获取当前缓存条目数。

• 返回值: 当前缓存数量

实现细节

• LRU 策略: 使用 Map 的插入顺序保证迭代顺序。get() 和 set() 通过 delete + set 将条目移到最新位置。
• 淘汰策略: 当 cache.size >= maxSize 时，删除 Map 的第一个条目（即最久未使用的条目）。
• 持久化: set() 和 get() 操作后触发 500ms 防抖的 localStorage.setItem()，避免频繁写入。
• 初始化: 构造函数从 localStorage 恢复缓存，解析失败时返回空 Map。

使用示例

import { resourceCache } from "@/services/resource-cache";

// 检查缓存
if (resourceCache.has("hw_好")) {
  return resourceCache.get("hw_好");
}

// 设置缓存
const data = await loadData();
resourceCache.set("hw_好", data);

// 查询缓存大小
console.log(resourceCache.size()); // 当前缓存条目数

// 清空缓存
resourceCache.clear();