Angular 13中无需使用图片URL缓存文件内容的方法咨询

针对你提供的接口响应格式（content为字符串形式的文件内容，通常是Base64编码），以下是几种无需依赖图片URL的缓存方案：

1. 基于HttpInterceptor的请求级缓存 #

利用Angular的HttpInterceptor拦截文件接口的响应，将返回的文件数据存储在内存中，后续相同请求直接返回缓存内容，适合会话内的临时缓存。

import { Injectable } from '@angular/core';
import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class FileCacheInterceptor implements HttpInterceptor {
  private cacheStore = new Map<string, HttpResponse<any>>();

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 仅缓存目标文件接口的GET请求
    if (request.method !== 'GET' || !request.url.includes('/your-file-endpoint')) {
      return next.handle(request);
    }

    const cachedResp = this.cacheStore.get(request.urlWithParams);
    if (cachedResp) {
      return of(cachedResp);
    }

    return next.handle(request).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cacheStore.set(request.urlWithParams, event);
        }
      })
    );
  }
}

// 在模块中注册拦截器
export const fileCacheInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: FileCacheInterceptor, multi: true }
];

2. LocalStorage/SessionStorage 本地缓存 #

如果文件体积较小（单文件Base64内容不超过5MB），可以直接将完整的接口响应数据存储到LocalStorage或SessionStorage中，用id或refId作为唯一缓存键。

// 缓存文件数据
cacheFile(fileData: any): void {
  localStorage.setItem(`cached_file_${fileData.id}`, JSON.stringify(fileData));
}

// 获取缓存的文件数据
getCachedFile(fileId: string): any | null {
  const cachedStr = localStorage.getItem(`cached_file_${fileId}`);
  return cachedStr ? JSON.parse(cachedStr) : null;
}

// 使用示例：请求后缓存并读取
this.fileApi.getFileById('xxx').subscribe(res => {
  this.cacheFile(res);
  // 后续使用优先读缓存
  const cached = this.getCachedFile(res.id);
  if (cached) {
    // 将Base64内容转为Blob用于展示/下载
    const blob = this.base64ToBlob(cached.content, cached.contentType);
    const objectUrl = URL.createObjectURL(blob);
    // 处理文件展示或下载逻辑
  }
});

// Base64转Blob工具方法
base64ToBlob(base64Str: string, contentType: string): Blob {
  const byteChars = atob(base64Str);
  const byteArrays: Uint8Array[] = [];
  for (let offset = 0; offset < byteChars.length; offset += 512) {
    const slice = byteChars.slice(offset, offset + 512);
    const byteNumbers = slice.split('').map(char => char.charCodeAt(0));
    byteArrays.push(new Uint8Array(byteNumbers));
  }
  return new Blob(byteArrays, { type: contentType });
}

3. IndexedDB 大文件缓存 #

当文件体积超过LocalStorage限制时，使用IndexedDB存储，它支持更大的容量（通常浏览器允许几十GB），适合缓存大文件内容。可以用localForage简化操作：

import localForage from 'localforage';

// 初始化IndexedDB存储
localForage.config({
  name: 'FileCacheDB',
  storeName: 'StoredFiles',
  description: '用于缓存接口返回的文件内容'
});

// 异步缓存文件
async cacheFileToDB(fileData: any): Promise<void> {
  await localForage.setItem(`file_${fileData.id}`, fileData);
}

// 异步获取缓存文件
async getCachedFileFromDB(fileId: string): Promise<any | null> {
  return await localForage.getItem(`file_${fileId}`);
}

4. Service Worker 离线缓存（PWA场景） #

如果你的项目是PWA，可通过Angular Service Worker配置缓存规则，自动拦截文件接口请求并缓存响应数据，实现离线访问：

在ngsw-config.json中添加数据缓存组：

{
  "dataGroups": [
    {
      "name": "file-api-cache-group",
      "urls": ["/api/files/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "7d",
        "timeout": "3s"
      }
    }
  ]
}

配置完成后，Service Worker会自动缓存符合规则的接口响应，后续请求优先读取缓存。

内容的提问来源于stack exchange，提问作者E. Zahra