版本：v8

從檔案系統載入照片

我們已經實作了拍照並儲存到檔案系統的功能。還缺少最後一項功能：照片已儲存在檔案系統中，但我們需要一種方法來儲存每個檔案的指標，以便它們可以再次顯示在相片庫中。

幸運的是，這很容易：我們將利用 Capacitor 的 Preferences API 在鍵值儲存中儲存我們的照片陣列。

Preferences API

首先定義一個常數變數，它將作為商店的鍵

export class PhotoService {
  public photos: UserPhoto[] = [];
  private PHOTO_STORAGE: string = 'photos';

  // other code
}

接下來，在 addNewToGallery 函式的結尾，新增對 Preferences.set() 的呼叫以儲存照片陣列。透過在這裡新增它，每次拍攝新照片時都會儲存照片陣列。這樣，應用程式使用者何時關閉或切換到不同的應用程式都沒關係 - 所有照片資料都會儲存。

Preferences.set({
  key: this.PHOTO_STORAGE,
  value: JSON.stringify(this.photos),
});

儲存照片陣列資料後，建立一個名為 loadSaved() 的函式，它可以檢索該資料。我們使用相同的鍵以 JSON 格式檢索照片陣列，然後將其剖析為陣列

public async loadSaved() {
  // Retrieve cached photo array data
  const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];

  // more to come...
}

在行動裝置上（接下來會介紹！），我們可以將圖像標籤的來源 <img src="x" /> 直接設定為檔案系統上的每個照片檔案，自動顯示它們。但是，在網路上，我們必須使用 Photo 物件上新的 base64 屬性，從檔案系統中將每個圖像讀取為 base64 格式。這是因為檔案系統 API 在底層使用 IndexedDB。以下是您需要在剛才新增的 loadSaved() 函式中新增的程式碼

// Display the photo by reading into base64 format
for (let photo of this.photos) {
  // Read each saved photo's data from the Filesystem
  const readFile = await Filesystem.readFile({
    path: photo.filepath,
    directory: Directory.Data,
  });

  // Web platform only: Load the photo as base64 data
  photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
}

之後，在 tab2.page.ts 中呼叫這個新方法，以便使用者第一次導覽到 Tab 2（相片庫）時，所有照片都會載入並顯示在畫面上。

async ngOnInit() {
  await this.photoService.loadSaved();
}

就是這樣！我們在 Ionic 應用程式中建立了一個完整的相片庫功能，它可以在網路上運作。接下來，我們將把它轉換為 iOS 和 Android 的行動應用程式！

從檔案系統載入照片

Preferences API​

目錄

Preferences API