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. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Die remove()-Methode der FileSystemHandle-Schnittstelle fordert die Entfernung des Eintrags, der durch das Handle repräsentiert wird, aus dem zugrunde liegenden Dateisystem an.

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

Sie können remove() auch auf das Stammverzeichnis des Origin Private File System aufrufen, um dessen Inhalt zu löschen; anschließend wird ein neues, leeres OPFS erstellt.

Syntax

remove()
remove(options)

Parameter

options Optional

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

recursive Optional: Ein boolescher Wert, der standardmäßig auf false gesetzt ist. Wenn er auf true gesetzt ist und der Eintrag ein Verzeichnis ist, wird dessen Inhalt 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 untergeordneten Einträgen ist.
NoModificationAllowedError DOMException: Wird ausgelöst, wenn der Browser keinen exklusiven Zugriff auf den Eintrag erhalten konnte.
NotAllowedError DOMException: Wird ausgelöst, wenn PermissionStatus nicht granted ist.
NotFoundError DOMException: Wird ausgelöst, wenn der Eintrag nicht gefunden wird.

Beispiele

Unser Demo zu FileSystemHandle.remove() (siehe den Quellcode) ist eine Anwendung zur Dateierstellung. Sie können Text in die <textarea> eingeben und die Schaltfläche "Datei speichern" <button> drücken; die App öffnet dann einen Dateiauswahldialog, der es Ihnen erlaubt, diesen Text in einer Textdatei Ihrer Wahl auf Ihrem lokalen Dateisystem zu speichern. Sie können auch die von Ihnen erstellten Dateien löschen.

Sie können den Inhalt der erstellten Dateien nicht anzeigen, und die App bleibt beim Neuladen oder Schließen der Seite nicht mit dem zugrunde liegenden Dateisystem synchron. Das bedeutet, dass die von der App erstellten Dateien im Dateisystem weiterhin existieren, wenn Sie sich nicht dazu 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 wird, wird ein Eintrag in der App erstellt (siehe processNewFile() im Quellcode):

Eine Referenz auf das Dateihandle wird in einem Array namens savedFileRefs gespeichert, damit es später leicht referenziert werden kann.
Ein Listenelement wird unter der Überschrift "Gespeicherte Dateien" in der Benutzeroberfläche hinzugefügt, wobei der Dateiname zusammen mit einer "Löschen"-Schaltfläche angezeigt wird.

Wenn die "Löschen"-Schaltfläche gedrückt wird, wird die deleteFile()-Funktion 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);
    }
  }
}

Im Ablauf bedeutet dies:

Für jedes in dem Array savedFileRefs gespeicherte Dateihandle überprüfen wir dessen Namen, um festzustellen, ob er mit dem id-Attribut der Schaltfläche ü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 zugrunde liegenden Dateisystem zu entfernen.
Wir entfernen auch das übereinstimmende Handle aus dem savedFileRefs-Array.
Schließlich entfernen wir das Listenelement, das zu dieser Datei in der Benutzeroberfläche gehört.