Dasorigin-private Dateisystem (OPFS) ist ein Speicherendpunkt, der als Teil derFile System API bereitgestellt wird, welcher der Herkunft der Seite privat ist und dem Benutzer nicht wie das reguläre Dateisystem sichtbar ist. Es bietet Zugriff auf eine spezielle Art von Datei, die für hohe Leistung optimiert ist und direkten Schreibzugriff auf ihre Inhalte ermöglicht.

Arbeiten mit Dateien mittels der File System Access API

DieFile System Access API, die dieFile System API erweitert, ermöglicht den Zugriff auf Dateien mithilfe von Auswahldialogmethoden. Zum Beispiel:

1. MitWindow.showOpenFilePicker() kann der Benutzer eine Datei zum Zugriff auswählen, was zu einemFileSystemFileHandle-Objekt führt.
2. FileSystemFileHandle.getFile() wird aufgerufen, um Zugriff auf den Inhalt der Datei zu erhalten, der Inhalt wird mitFileSystemFileHandle.createWritable() /FileSystemWritableFileStream.write() geändert.
3. FileSystemHandle.requestPermission({mode: 'readwrite'}) wird verwendet, um die Erlaubnis des Benutzers zur Speicherung der Änderungen anzufordern.
4. Wenn der Benutzer die Erlaubnis erteilt, werden die Änderungen in der Originaldatei gespeichert.

Dies funktioniert, hat jedoch einige Einschränkungen. Diese Änderungen werden im dem Benutzer sichtbaren Dateisystem vorgenommen, sodass viele Sicherheitsüberprüfungen vorhanden sind (zum Beispielsicheres Surfen in Chrome), um zu verhindern, dass bösartiger Inhalt in dieses Dateisystem geschrieben wird. Diese Schreibvorgänge erfolgen nicht direkt, sondern verwenden eine temporäre Datei. Die Originaldatei wird nur geändert, wenn alle Sicherheitsüberprüfungen bestanden wurden.

Infolgedessen sind diese Vorgänge relativ langsam. Es fällt nicht so sehr auf, wenn Sie kleine Textänderungen vornehmen, aber die Leistung leidet, wenn Sie bedeutendere, großangelegte Dateiaktualisierungen wieSQLite-Datenbankänderungen vornehmen.

Wie löst das OPFS solche Probleme?

Das OPFS bietet Datei-Zugriff auf niedriger Ebene, byteweise, der der Herkunft der Seite privat ist und dem Benutzer nicht sichtbar ist. Dadurch sind nicht die gleichen Sicherheitsüberprüfungen und Genehmigungen erforderlich und es ist daher schneller als File System Access API-Aufrufe. Es verfügt auch über eine Reihe synchroner Aufrufe (andere File System API-Aufrufe sind asynchron), die nur innerhalb von Web-Workern ausgeführt werden können, um den Hauptthread nicht zu blockieren.

Zusammengefasst die Unterschiede zwischen dem OPFS und dem benutzernahen Dateisystem:

• Das OPFS unterliegt denSpeicherquoten-Beschränkungen des Browsers, genauso wie jeder andere herkunftspartitionierte Speichermechanismus (zum BeispielIndexedDB API). Sie können den verwendeten Speicherplatz des OPFS übernavigator.storage.estimate() abrufen.
• Das Löschen von Speicherdateien für die Website löscht das OPFS.
• Genehmigungsaufforderungen und Sicherheitsüberprüfungen sind nicht erforderlich, um auf Dateien im OPFS zuzugreifen.
• Browser speichern die Inhalte des OPFS irgendwo auf der Festplatte, Sie können jedoch nicht erwarten, die erstellten Dateien eins zu eins zu finden. Das OPFS ist nicht dafür vorgesehen, dem Benutzer sichtbar zu sein.

Wie greifen Sie auf das OPFS zu?

Um zunächst auf das OPFS zuzugreifen, rufen Sie die Methodenavigator.storage.getDirectory() auf. Dies gibt eine Referenz zu einemFileSystemDirectoryHandle-Objekt zurück, das die Wurzel des OPFS darstellt.

Manipulation des OPFS im Hauptthread

Beim Zugriff auf das OPFS vom Hauptthread aus verwenden Sie asynchrone,Promise-basierte APIs. Sie können Datei- (FileSystemFileHandle) und Verzeichnis- (FileSystemDirectoryHandle) Handles durch Aufruf vonFileSystemDirectoryHandle.getFileHandle() undFileSystemDirectoryHandle.getDirectoryHandle() auf demFileSystemDirectoryHandle-Objekt, das die Wurzel des OPFS darstellt (und untergeordnete Verzeichnisse, sobald sie erstellt werden), erhalten.

// Create a hierarchy of files and foldersconst fileHandle = await opfsRoot.getFileHandle("my first file", {  create: true,});const directoryHandle = await opfsRoot.getDirectoryHandle("my first folder", {  create: true,});const nestedFileHandle = await directoryHandle.getFileHandle(  "my first nested file",  { create: true },);const nestedDirectoryHandle = await directoryHandle.getDirectoryHandle(  "my first nested folder",  { create: true },);// Access existing files and folders via their namesconst existingFileHandle = await opfsRoot.getFileHandle("my first file");const existingDirectoryHandle =  await opfsRoot.getDirectoryHandle("my first folder");

Eine Datei lesen

1. Führen Sie einenFileSystemDirectoryHandle.getFileHandle()-Aufruf durch, um einFileSystemFileHandle-Objekt zurückzugeben.
2. Rufen Sie dasFileSystemFileHandle.getFile()-Objekt auf, um einFile-Objekt zurückzugeben. Dies ist ein spezialisierter Typ vonBlob und kann dementsprechend genauso wie jedes andereBlob manipuliert werden. Zum Beispiel könnten Sie direkt überBlob.text() auf den Textinhalt zugreifen.

Eine Datei schreiben

1. Führen Sie einenFileSystemDirectoryHandle.getFileHandle()-Aufruf durch, um einFileSystemFileHandle-Objekt zurückzugeben.
2. Rufen SieFileSystemFileHandle.createWritable() auf, um einFileSystemWritableFileStream-Objekt zurückzugeben, das ein spezialisierter Typ einesWritableStream ist.
3. Schreiben Sie Inhalte mit einem Aufruf vonFileSystemWritableFileStream.write() hinein.
4. Schließen Sie den Stream mitWritableStream.close().

Eine Datei oder einen Ordner löschen

Sie könnenFileSystemDirectoryHandle.removeEntry() im übergeordneten Verzeichnis aufrufen und den Namen des zu entfernenden Elements übergeben:

directoryHandle.removeEntry("my first nested file");

Sie können auchFileSystemHandle.remove() auf demFileSystemFileHandle oderFileSystemDirectoryHandle, das das zu entfernende Element darstellt, aufrufen. Um einen Ordner einschließlich aller Unterordner zu löschen, übergeben Sie die Option{ recursive: true }.

await fileHandle.remove();await directoryHandle.remove({ recursive: true });

Das Folgende bietet eine schnelle Methode, um das gesamte OPFS zu löschen:

await (await navigator.storage.getDirectory()).remove({ recursive: true });

Den Inhalt eines Ordners auflisten

FileSystemDirectoryHandle ist einasynchroner Iterator. Daher können Sie über ihn mit einerfor await...of-Schleife und Standardmethoden wieentries(),values() undkeys() iterieren.

Zum Beispiel:

for await (let [name, handle] of directoryHandle) {}for await (let [name, handle] of directoryHandle.entries()) {}for await (let handle of directoryHandle.values()) {}for await (let name of directoryHandle.keys()) {}

Manipulation des OPFS von einem Web-Worker

Web-Worker blockieren den Hauptthread nicht, was bedeutet, dass Sie in diesem Kontext die synchronen Datei-Zugriffs-APIs verwenden können. Synchrone APIs sind schneller, da sie das Arbeiten mit Promises vermeiden.

Sie können synchron auf eine Datei zugreifen, indem SieFileSystemFileHandle.createSyncAccessHandle() auf einem regulärenFileSystemFileHandle aufrufen:

const opfsRoot = await navigator.storage.getDirectory();const fileHandle = await opfsRoot.getFileHandle("my-high-speed-file.txt", {  create: true,});const syncAccessHandle = await fileHandle.createSyncAccessHandle();

Es gibt eine Reihe synchroner Methoden, die auf dem zurückgegebenenFileSystemSyncAccessHandle verfügbar sind:

• getSize(): Gibt die Größe der Datei in Bytes zurück.
• write(): Schreibt den Inhalt eines Puffers in die Datei, optional an einem angegebenen Offset, und gibt die Anzahl der geschriebenen Bytes zurück. Die Überprüfung der zurückgegebenen Anzahl geschriebener Bytes ermöglicht es den Aufrufern, Fehler und Teil-Schreibvorgänge zu erkennen und zu handhaben.
• read(): Liest die Inhalte der Datei in einen Puffer, optional an einem angegebenen Offset.
• truncate(): Ändert die Größe der Datei auf die angegebene Größe.
• flush(): Stellt sicher, dass die Datei-Inhalte alle durchwrite() vorgenommenen Änderungen enthalten.
• close(): Schließt den Zugriffshandler.

Hier ist ein Beispiel, das alle oben genannten Methoden verwendet:

const opfsRoot = await navigator.storage.getDirectory();const fileHandle = await opfsRoot.getFileHandle("fast", { create: true });const accessHandle = await fileHandle.createSyncAccessHandle();const textEncoder = new TextEncoder();const textDecoder = new TextDecoder();// Initialize this variable for the size of the file.let size;// The current size of the file, initially `0`.size = accessHandle.getSize();// Encode content to write to the file.const content = textEncoder.encode("Some text");// Write the content at the beginning of the file.accessHandle.write(content, { at: size });// Flush the changes.accessHandle.flush();// The current size of the file, now `9` (the length of "Some text").size = accessHandle.getSize();// Encode more content to write to the file.const moreContent = textEncoder.encode("More content");// Write the content at the end of the file.accessHandle.write(moreContent, { at: size });// Flush the changes.accessHandle.flush();// The current size of the file, now `21` (the length of// "Some textMore content").size = accessHandle.getSize();// Prepare a data view of the length of the file.const dataView = new DataView(new ArrayBuffer(size));// Read the entire file into the data view.accessHandle.read(dataView, { at: 0 });// Logs `"Some textMore content"`.console.log(textDecoder.decode(dataView));// Read starting at offset 9 into the data view.accessHandle.read(dataView, { at: 9 });// Logs `"More content"`.console.log(textDecoder.decode(dataView));// Truncate the file after 4 bytes.accessHandle.truncate(4);

Browser-Kompatibilität

Siehe auch

• Das origin-private Dateisystem auf web.dev