FileSystemHandle: remove()-Methode

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die remove()-Methode der FileSystemHandle-Schnittstelle fordert die Entfernung des vom Handle repräsentierten Eintrags aus dem zugrundeliegenden Dateisystem an.

Die remove()-Methode ermöglicht es Ihnen, eine Datei oder ein Verzeichnis direkt von seinem Handle zu entfernen. Ohne diese Methode müssten Sie das Handle des übergeordneten Verzeichnisses abrufen und dann FileSystemDirectoryHandle.removeEntry() darauf aufrufen, um es zu entfernen.

Sie können remove() auch auf dem Stammverzeichnis des Origin Private File System aufrufen, um dessen Inhalte zu löschen, woraufhin ein neues leeres OPFS erstellt wird.

Syntax

remove()
remove(options)

Parameter

options Optional

Ein Objekt, das Optionen für die Entfernung angibt. Mögliche Eigenschaften sind wie folgt:

recursive Optional: Ein boolescher Wert, der standardmäßig false ist. Wenn er auf true gesetzt ist und der Eintrag ein Verzeichnis ist, werden dessen Inhalte rekursiv entfernt.

Rückgabewert

Ein Promise, das mit einem Wert von undefined erfüllt wird.

Ausnahmen

InvalidModificationError DOMException: Wird ausgelöst, wenn recursive auf false gesetzt ist und der zu entfernende Eintrag ein Verzeichnis mit Untereinträgen ist.
NoModificationAllowedError DOMException: Wird ausgelöst, wenn der Browser keine exklusive Sperre auf den Eintrag setzen kann.
NotAllowedError DOMException: Wird ausgelöst, wenn PermissionStatus nicht granted ist.
NotFoundError DOMException: Wird ausgelöst, wenn der Eintrag nicht gefunden wird.

Beispiele

Unser Demo für FileSystemHandle.remove() (siehe den Quellcode) ist eine Dateierstellungs-App. Sie können Text in das <textarea> eingeben und die "Datei speichern"-<button>-Taste drücken. Die App wird dann einen Dateiauswahldialog öffnen, der es Ihnen ermöglicht, den Text auf Ihrem lokalen Dateisystem in einer Textdatei Ihrer Wahl zu speichern. Sie können auch die von Ihnen erstellten Dateien löschen.

Es ist nicht möglich, den Inhalt der erstellten Dateien anzuzeigen, und es bleibt nicht mit dem zugrundeliegenden Dateisystem synchronisiert, wenn die Seite neu geladen oder geschlossen wird. Das bedeutet, dass Dateien, die von der App erstellt wurden, weiterhin im Dateisystem vorhanden sind, wenn Sie sich nicht dafür entscheiden, sie vor dem Neuladen oder Schließen des Tabs zu löschen.

Der Dateiauswahldialog, das Dateihandle und die Datei selbst (wenn Sie eine neue Datei erstellen) werden mit window.showSaveFilePicker() erstellt. Der Text wird über FileSystemFileHandle.createWritable() in die Datei geschrieben.

Sobald eine Datei im Dateisystem erstellt wurde, wird ein Eintrag in der App erstellt (siehe processNewFile() im Quellcode):

Eine Referenz auf das Dateihandle wird in einem Array namens savedFileRefs gespeichert, sodass es später leicht zugänglich ist.
Ein Listeneintrag wird unter der Überschrift "Gespeicherte Dateien" in der Benutzeroberfläche hinzugefügt, wobei der Dateiname zusammen mit einer "Löschen"-Taste angezeigt wird.

Wenn die "Löschen"-Taste gedrückt wird, wird die Funktion deleteFile() ausgeführt, die folgendermaßen aussieht:

async function deleteFile(e) {
  for (const handle of savedFileRefs) {
    if (handle.name === e.target.id + ".txt") {
      await handle.remove();
      savedFileRefs = savedFileRefs.filter(
        (handle) => handle.name !== e.target.id + ".txt",
      );
      e.target.parentElement.parentElement.removeChild(e.target.parentElement);
    }
  }
}

Durchlaufen wir dies Schritt für Schritt:

Für jedes in savedFileRefs gespeicherte Dateihandle überprüfen wir den Namen, um zu sehen, ob er mit dem id-Attribut der Taste übereinstimmt, die das Ereignis ausgelöst hat.
Wenn eine Übereinstimmung gefunden wird, führen wir FileSystemHandle.remove() auf diesem Handle aus, um die Datei aus dem zugrundeliegenden Dateisystem zu entfernen.
Wir entfernen das übereinstimmende Handle auch aus dem savedFileRefs-Array.
Schließlich entfernen wir den den betreffenden Listeneintrag in der Benutzeroberfläche.