如何在Angular本地环境不使用Web API存储图片及PDF文件

以下方案均为纯前端侧实现，存储的数据仅保存在当前用户的浏览器沙箱内，无法跨设备同步，用户清除浏览器站点数据后存储内容会丢失。

方案1：LocalStorage + Base64 编码 #

• 适用场景：单文件体积小于5MB的小文件存储，实现成本最低
• 实现逻辑：将选中的图片/PDF转为Base64字符串，直接存入LocalStorage，读取时直接解析Base64即可渲染
• 示例代码：

// 文件选择后存储逻辑
onFileSelected(event: Event) {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = () => {
    const base64Content = reader.result as string;
    // 用文件名作为key存储，可根据需求调整命名规则
    localStorage.setItem(`local_file_${file.name}`, base64Content);
  };
  reader.readAsDataURL(file);
}

// 读取已存储文件
getSavedFile(fileName: string): string | null {
  return localStorage.getItem(`local_file_${fileName}`);
}

• 注意：大部分浏览器单域名LocalStorage容量上限为5-10MB，超出会触发存储报错，不适合存大文件。

方案2：IndexedDB 存储 #

• 适用场景：存储大体积文件（单域默认支持至少250MB，部分浏览器支持占用磁盘剩余空间的50%），支持批量操作、查询、删除，性能远高于LocalStorage
• 实现逻辑：直接使用浏览器原生IndexedDB API，可封装为Angular服务全局调用，不需要引入第三方依赖
• 示例服务代码：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LocalFileService {
  private readonly dbName = 'LocalFileStorage';
  private readonly storeName = 'fileStore';
  private db: IDBDatabase | null = null;

  constructor() {
    this.initDB();
  }

  // 初始化数据库
  private initDB(): void {
    const openRequest = indexedDB.open(this.dbName, 1);
    openRequest.onupgradeneeded = (e) => {
      const db = (e.target as IDBOpenDBRequest).result;
      if (!db.objectStoreNames.contains(this.storeName)) {
        // 用fileName作为主键，可按需调整
        db.createObjectStore(this.storeName, { keyPath: 'fileName' });
      }
    };
    openRequest.onsuccess = (e) => {
      this.db = (e.target as IDBOpenDBRequest).result;
    };
  }

  // 存储文件
  saveFile(file: File): Promise<void> {
    return new Promise((resolve, reject) => {
      if (!this.db) return reject('数据库未初始化完成');
      const transaction = this.db.transaction(this.storeName, 'readwrite');
      const store = transaction.objectStore(this.storeName);
      store.put({ fileName: file.name, file: file });
      transaction.oncomplete = () => resolve();
      transaction.onerror = () => reject(transaction.error);
    });
  }

  // 读取文件
  getFile(fileName: string): Promise<File | null> {
    return new Promise((resolve, reject) => {
      if (!this.db) return reject('数据库未初始化完成');
      const transaction = this.db.transaction(this.storeName, 'readonly');
      const store = transaction.objectStore(this.storeName);
      const getRequest = store.get(fileName);
      getRequest.onsuccess = () => resolve(getRequest.result?.file || null);
      getRequest.onerror = () => reject(getRequest.error);
    });
  }
}

• 注意：IndexedDB是目前全浏览器兼容最好的大容量本地存储方案，适合存储高清图片、多页PDF等大体积资源。

方案3：File System Access API #

• 适用场景：需要直接读写用户本地磁盘指定目录/文件的场景，比如做本地文件编辑器类产品
• 实现逻辑：调用浏览器原生File System Access API，获得用户授权后可直接读写本地磁盘的文件，完全不需要后端参与
• 注意：该API仅支持Chromium内核浏览器（Chrome、Edge、Opera等），Safari、Firefox兼容性较差，需要全浏览器兼容的场景不推荐使用。

选型建议 #

• 小体积文件优先选LocalStorage方案，实现最简单
• 大文件、多文件存储优先选IndexedDB，兼容性好、容量上限高
• 仅在需要直接操作用户本地磁盘文件的场景下考虑File System Access API

内容的提问来源于stack exchange，提问作者Manthan Machhi