Signatur
Beschreibung
Die nicht standardisierte Methode requestFileSystem() gehört zur alten File and Directory Entries API (früher „FileSystem API“) und gibt es praktisch nur in Chromium-basierten Browsern, dort als window.webkitRequestFileSystem(). Damit bekommt eine Webseite ein abgeschottetes Dateisystem (Sandbox), das an ihren Ursprung (Origin) gebunden ist. Darin lassen sich Verzeichnisse und Dateien anlegen, lesen und schreiben, ohne dass das echte Dateisystem des Nutzers berührt wird.
Es gibt zwei Speicherarten: TEMPORARY ist Speicher, den der Browser bei Platzmangel ohne Nachfrage löschen darf. PERSISTENT bleibt erhalten, bis die Anwendung oder der Nutzer ihn löscht. Dafür braucht es aber vorher ein Speicherkontingent über navigator.webkitPersistentStorage.requestQuota().
Die API arbeitet nur mit Callbacks und nicht mit Promises. Nach dem Erfolg bekommt man ein FileSystem-Objekt. Über dessen Eigenschaft root (ein FileSystemDirectoryEntry) kommt man mit getFile() und getDirectory() an Einträge. Zum Schreiben nimmt man FileEntry.createWriter(), zum Lesen FileEntry.file() zusammen mit einem FileReader.
Für neue Projekte sollte man diese Methode nicht mehr verwenden. Der moderne, standardisierte Ersatz ist das Origin Private File System (OPFS) über navigator.storage.getDirectory() aus der File System API. Es funktioniert in allen aktuellen Browsern und arbeitet mit Promises.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | number | Speicherart: window.TEMPORARY (0) oder window.PERSISTENT (1). |
|
| $size Pflicht | number | Gewünschte Größe des Speichers in Bytes. Bei PERSISTENT darf sie das zuvor gewährte Kontingent nicht überschreiten. |
|
| $successCallback Pflicht | (fs: FileSystem) => void | Wird mit dem FileSystem-Objekt aufgerufen, sobald das Dateisystem bereitsteht. |
|
| $errorCallback | (error: DOMException) => void | Wird bei einem Fehler aufgerufen, z. B. QuotaExceededError oder SecurityError. |
Rückgabewert
successCallback bzw. errorCallback.Beispiele
Temporäres Dateisystem anfordern und Datei schreiben
const requestFS = window.requestFileSystem || window.webkitRequestFileSystem;
if (!requestFS) {
console.log('FileSystem API nicht verfügbar');
} else {
requestFS(window.TEMPORARY, 5 * 1024 * 1024, (fs) => {
console.log('Dateisystem geöffnet:', fs.name);
fs.root.getFile('notiz.txt', { create: true }, (fileEntry) => {
fileEntry.createWriter((writer) => {
writer.onwriteend = () => console.log('Geschrieben:', fileEntry.fullPath);
writer.onerror = (e) => console.error('Schreibfehler', e);
writer.write(new Blob(['Hallo Sandbox!'], { type: 'text/plain' }));
});
});
}, (err) => console.error('Fehler:', err.name));
}Datei lesen – als Promise verpackt
const requestFS = window.requestFileSystem || window.webkitRequestFileSystem;
const getFS = (type, size) =>
new Promise((resolve, reject) => requestFS(type, size, resolve, reject));
const getFile = (dir, path, opts = {}) =>
new Promise((resolve, reject) => dir.getFile(path, opts, resolve, reject));
const readText = (fileEntry) =>
new Promise((resolve, reject) => {
fileEntry.file((file) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsText(file);
}, reject);
});
const main = async () => {
try {
const fs = await getFS(window.TEMPORARY, 1024 * 1024);
const entry = await getFile(fs.root, 'notiz.txt');
console.log(await readText(entry));
} catch (err) {
console.error('Lesen fehlgeschlagen:', err.name);
}
};
main();Dauerhaften Speicher mit Kontingent anfordern
const bytes = 50 * 1024 * 1024; // 50 MB
navigator.webkitPersistentStorage.requestQuota(bytes, (granted) => {
console.log('Gewährt:', granted, 'Bytes');
window.webkitRequestFileSystem(window.PERSISTENT, granted, (fs) => {
fs.root.getDirectory('cache', { create: true }, (dir) => {
console.log('Verzeichnis angelegt:', dir.fullPath);
});
}, (err) => console.error(err.name));
}, (err) => console.error('Kontingent abgelehnt:', err));Moderner Ersatz: Origin Private File System
const saveNote = async (text) => {
const root = await navigator.storage.getDirectory();
const handle = await root.getFileHandle('notiz.txt', { create: true });
const writable = await handle.createWritable();
await writable.write(text);
await writable.close();
const file = await handle.getFile();
console.log(await file.text());
};
saveNote('Hallo OPFS!');// Wichtig · Fallstricke
- Nicht standardisiert und veraltet: Die Methode gibt es nur in Chromium-Browsern (Chrome, Edge, Opera), meist nur mit dem Präfix
webkitRequestFileSystem. Firefox und Safari haben sie nie unterstützt. Deshalb immer vorher prüfen, ob sie vorhanden ist. - Nicht im echten Dateisystem: Die Dateien liegen in einer Sandbox des Browsers. Der Nutzer sieht sie nicht im Dateimanager und kann sie dort auch nicht öffnen.
- Nur in sicheren Kontexten: In neueren Chrome-Versionen geht das nur über HTTPS oder
localhost. Im Inkognito-Modus schlägt die Methode fehl oder es gibt nur sehr wenig Speicher. Frühere Tricks zur Erkennung des Inkognito-Modus über diese Methode funktionieren nicht mehr. - TEMPORARY ohne Garantie: Bei Platzmangel darf der Browser die Daten jederzeit löschen. Für
PERSISTENTmuss vorher ein Kontingent mitnavigator.webkitPersistentStorage.requestQuota()angefordert werden, sonst gibt es einenQuotaExceededError. - Nur Callbacks: Die API kennt keine Promises. Wer mit
async/awaitarbeiten will, muss die Callbacks selbst in Promises verpacken. - Empfehlung: Für neue Projekte
navigator.storage.getDirectory()(OPFS) oder IndexedDB verwenden.