Persistent Storage API: Verständnis und Verwaltung des Storage-Kontingents für Webanwendungen

Die Persistent Storage API bietet Webentwicklern eine standardisierte Möglichkeit, ein Storage-Kontingent innerhalb des Browsers eines Benutzers anzufordern und zu verwalten. Im Gegensatz zu herkömmlichen Speichermechanismen wie Cookies oder localStorage, die oft in der Größe begrenzt sind und einer automatischen Löschung unterliegen, ermöglicht die Persistent Storage API Anwendungen, größere Speichermengen anzufordern und vor allem anzufordern, dass der Speicher persistent ist – was bedeutet, dass der Browser ihn nicht automatisch löscht, selbst bei Speicherengpässen.

Warum Persistent Storage wichtig ist

Im heutigen Web, in dem Progressive Web Apps (PWAs) immer häufiger vorkommen und Benutzer reichhaltige Offline-Erfahrungen erwarten, ist zuverlässiger Speicher unerlässlich. Betrachten Sie diese Szenarien:

• Offline-Zugriff auf Dokumente: Eine Dokumentbearbeitungsanwendung (wie Google Docs) muss Dokumente lokal speichern, damit Benutzer auch ohne Internetverbindung weiterarbeiten können.
• Medienwiedergabe: Streaming-Dienste wie Spotify oder Netflix ermöglichen es Benutzern, Inhalte zur Offline-Wiedergabe herunterzuladen, was viel Speicherplatz erfordert.
• Spieldaten: Online-Spiele speichern oft den Fortschritt, die Levels und die Assets des Benutzers lokal, um ein reibungsloses und reaktionsschnelles Erlebnis zu bieten.
• Caching großer Datensätze: Anwendungen, die mit großen Datensätzen arbeiten, wie z. B. Kartenanwendungen (z. B. Google Maps, OpenStreetMap-basierte Apps), profitieren davon, Daten lokal zu cachen, um Netzwerkanforderungen zu reduzieren und die Leistung zu verbessern.
• Lokale Datenverarbeitung: Webanwendungen, die eine aufwendige Datenverarbeitung durchführen (z. B. Bildbearbeitung, Videobearbeitung), können Zwischenergebnisse lokal speichern, um wiederholte Berechnungen zu vermeiden.

Ohne persistenten Speicher könnte der Browser den von diesen Anwendungen genutzten Speicher möglicherweise automatisch löschen, wenn das Gerät nur noch wenig Speicherplatz hat, was zu einem frustrierenden Benutzererlebnis und potenziellen Datenverlust führen kann. Die Persistent Storage API behebt dieses Problem, indem sie einen Mechanismus für Anwendungen bereitstellt, um persistenten Speicher anzufordern und die Speichernutzung zu verfolgen.

Verständnis des Storage-Kontingents

Jeder Browser weist jeder Herkunft (Domain) eine bestimmte Menge an Speicherplatz zu. Dieses Storage-Kontingent ist nicht fest und kann je nach Faktoren wie der Gesamtspeicherkapazität des Geräts, der verfügbaren Menge an freiem Speicherplatz und den Browsereinstellungen des Benutzers variieren. Die Storage API bietet Methoden zur Abfrage des verfügbaren Storage-Kontingents und der bereits genutzten Speichermenge.

Abfrage des Storage-Kontingents

Die navigator.storage-Schnittstelle bietet Zugriff auf speicherbezogene Informationen. Sie können die estimate()-Methode verwenden, um eine Schätzung des verfügbaren Storage-Kontingents und der von Ihrer Anwendung genutzten Speichermenge zu erhalten. Das zurückgegebene Objekt enthält die Eigenschaften usage und quota, die beide in Bytes gemessen werden.

            
async function getStorageEstimate() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimate = await navigator.storage.estimate();
    console.log(`Usage: ${estimate.usage}`);
    console.log(`Quota: ${estimate.quota}`);
    console.log(`Percentage used: ${(estimate.usage / estimate.quota * 100).toFixed(2)}%`);
  } else {
    console.warn("Storage estimate API not supported.");
  }
}

getStorageEstimate();

            

              
                Copy
              
            
          

Beispiel: Nehmen wir an, estimate.usage gibt 10485760 (10 MB) und estimate.quota gibt 1073741824 (1 GB) zurück. Dies zeigt an, dass Ihre Anwendung 10 MB ihres 1 GB-Kontingents genutzt hat, was etwa 1 % des verfügbaren Speichers entspricht.

Interpretation der Kontingentwerte

Der Wert quota stellt die maximale Speichermenge dar, die Ihre Anwendung *verwenden* kann. Es ist jedoch wichtig zu verstehen, dass dieses Kontingent nicht garantiert ist. Der Browser kann das Kontingent reduzieren, wenn das Gerät nur noch wenig Speicherplatz hat oder wenn der Benutzer Browserdaten löscht. Daher sollte Ihre Anwendung so konzipiert sein, dass sie Situationen bewältigen kann, in denen der verfügbare Speicher geringer ist als das angegebene Kontingent.

Best Practice: Implementieren Sie einen Mechanismus zur Überwachung der Speichernutzung und informieren Sie den Benutzer proaktiv, wenn sich die Anwendung ihrem Speicherlimit nähert. Bieten Sie dem Benutzer Optionen, um unnötige Daten zu löschen oder seinen Speicherplan zu erweitern (falls zutreffend).

Anfordern von persistentem Speicher

Selbst wenn Ihre Anwendung über ein ausreichendes Storage-Kontingent verfügt, kann der Browser die Daten Ihrer Anwendung unter Speicherbelastung möglicherweise immer noch automatisch löschen. Um dies zu verhindern, können Sie mithilfe der Methode navigator.storage.persist() persistenten Speicher anfordern.

            
async function requestPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersistent = await navigator.storage.persist();
    console.log(`Persistent storage granted: ${isPersistent}`);

    if (isPersistent) {
      console.log("Storage will not be cleared automatically.");
    } else {
      console.warn("Persistent storage not granted.");
      // Provide guidance to the user on how to enable persistent storage in their browser.
    }
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

requestPersistentStorage();

            

              
                Copy
              
            
          

Die Methode persist() gibt einen booleschen Wert zurück, der angibt, ob die Anfrage nach persistentem Speicher gewährt wurde. Der Browser kann den Benutzer um Erlaubnis bitten, bevor er persistenten Speicher gewährt. Die genaue Eingabeaufforderung variiert je nach Browser und den Einstellungen des Benutzers.

Benutzerinteraktion und Berechtigung

Die Entscheidung des Browsers, persistenten Speicher zu gewähren, hängt von mehreren Faktoren ab, darunter:

• Benutzerengagement: Browser gewähren Anwendungen, mit denen der Benutzer häufig interagiert, eher persistenten Speicher.
• Benutzereinstellungen: Benutzer können ihre Browsereinstellungen konfigurieren, um zu steuern, wie Anfragen nach persistentem Speicher behandelt werden. Sie können wählen, alle Anfragen automatisch zu genehmigen, alle Anfragen abzulehnen oder bei jeder Anfrage aufgefordert zu werden.
• Verfügbarer Speicher: Wenn das Gerät nur noch sehr wenig Speicherplatz hat, kann der Browser die Anfrage nach persistentem Speicher ablehnen, unabhängig vom Benutzerengagement oder den Einstellungen.
• Origin-Vertrauen: Sichere Kontexte (HTTPS) sind in der Regel für persistenten Speicher erforderlich.

Wichtig: Gehen Sie nicht davon aus, dass die Anfrage nach persistentem Speicher immer gewährt wird. Ihre Anwendung sollte widerstandsfähig gegenüber Situationen sein, in denen der Speicher nicht persistent ist. Implementieren Sie Strategien zur Sicherung von Daten auf einem Server oder zur ordnungsgemäßen Behandlung von Datenverlusten.

Überprüfen auf vorhandene Persistenz

Sie können die Methode navigator.storage.persisted() verwenden, um zu überprüfen, ob Ihre Anwendung bereits persistenten Speicher gewährt hat.

            
async function checkPersistentStorage() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersistent = await navigator.storage.persisted();
    console.log(`Persistent storage already granted: ${isPersistent}`);
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

checkPersistentStorage();

            

              
                Copy
              
            
          

Speichertechnologien und Kontingent

Die Persistent Storage API interagiert mit verschiedenen im Browser verfügbaren Speichertechnologien. Es ist entscheidend zu verstehen, wie diese Technologien vom Kontingent betroffen sind.

• IndexedDB: Eine leistungsstarke NoSQL-Datenbank zum Speichern strukturierter Daten auf Clientseite. IndexedDB unterliegt Speicher-Kontingentbeschränkungen und kann erheblich von persistentem Speicher profitieren.
• Cache API: Wird von Service Workern verwendet, um Netzwerkanforderungen zwischenzuspeichern, wodurch Offline-Zugriff und verbesserte Leistung ermöglicht werden. Caches, die über die Cache API erstellt werden, tragen ebenfalls zum gesamten Storage-Kontingent bei.
• localStorage & sessionStorage: Einfache Key-Value-Stores für kleinere Datenmengen. Während localStorage standardmäßig persistent ist (es sei denn, der Benutzer löscht Browserdaten), ist es in der Größe begrenzt und profitiert nicht so sehr von den Persistenzgarantien der Persistent Storage API wie IndexedDB oder die Cache API. Ihre Nutzung zählt jedoch trotzdem zum Gesamtkontingent.
• Cookies: Obwohl Cookies technisch gesehen ein Speichermechanismus sind, werden sie in der Regel für die Sitzungsverwaltung und -verfolgung verwendet, anstatt große Datenmengen zu speichern. Cookies haben ihre eigenen Größenbeschränkungen und unterscheiden sich vom Storage-Kontingent, das von der Storage API verwaltet wird.

Beispiel: Eine PWA verwendet IndexedDB, um Benutzerprofile und Offlinedaten zu speichern, und die Cache API, um statische Assets wie Bilder und JavaScript-Dateien zwischenzuspeichern. Das Anfordern von persistentem Speicher stellt sicher, dass diese zwischengespeicherten Daten weniger wahrscheinlich gelöscht werden, was ein konsistentes Offline-Erlebnis bietet.

Best Practices für die Storage-Kontingentverwaltung

Eine effektive Storage-Kontingentverwaltung ist unerlässlich für die Erstellung robuster und benutzerfreundlicher Webanwendungen. Hier sind einige Best Practices, die Sie befolgen sollten:

1. Überwachen Sie die Speichernutzung regelmäßig

Implementieren Sie einen Mechanismus, um die Speichernutzung Ihrer Anwendung regelmäßig mithilfe von navigator.storage.estimate() zu überwachen. Auf diese Weise können Sie potenzielle Speicherprobleme proaktiv identifizieren und Korrekturmaßnahmen ergreifen, bevor sie sich auf das Benutzererlebnis auswirken.

2. Implementieren Sie eine Speichermanagement-Benutzeroberfläche

Stellen Sie den Benutzern eine klare und intuitive Benutzeroberfläche zur Verwaltung ihres Speichers zur Verfügung. Diese Benutzeroberfläche sollte es Benutzern ermöglichen:

• Ihre aktuelle Speichernutzung anzuzeigen.
• Die Daten zu identifizieren, die den meisten Speicher verbrauchen.
• Unnötige Daten zu löschen (z. B. zwischengespeicherte Dateien, heruntergeladene Inhalte).

Beispiel: Eine Fotobearbeitungsanwendung könnte eine Benutzeroberfläche bereitstellen, die den Benutzern eine Aufschlüsselung des von einzelnen Fotos und Alben verwendeten Speichers zeigt und es ihnen ermöglicht, nicht mehr benötigte Fotos einfach zu löschen.

3. Optimieren Sie die Datenspeicherung

Optimieren Sie die Datenspeicherung Ihrer Anwendung, um den Speicherbedarf zu minimieren. Dies beinhaltet:

• Daten vor der Speicherung komprimieren.
• Effiziente Datenformate verwenden (z. B. Protocol Buffers, MessagePack).
• Vermeidung der Speicherung redundanter Daten.
• Implementieren von Datenablaufrichtlinien, um alte oder ungenutzte Daten automatisch zu löschen.

4. Implementieren Sie eine Strategie zur sanften Verschlechterung

Konzipieren Sie Ihre Anwendung so, dass sie Situationen, in denen der Speicher begrenzt ist oder persistenter Speicher nicht gewährt wird, ordnungsgemäß bewältigen kann. Dies kann Folgendes umfassen:

• Deaktivieren bestimmter Funktionen, die viel Speicher benötigen.
• Anzeigen einer Warnmeldung für den Benutzer.
• Bereitstellen einer Option zur Sicherung von Daten auf einem Server.

5. Informieren Sie Benutzer über persistenten Speicher

Wenn Ihre Anwendung stark auf persistenten Speicher angewiesen ist, informieren Sie die Benutzer über die Vorteile der Gewährung der Berechtigung für persistenten Speicher. Erklären Sie, wie persistenter Speicher die Leistung der Anwendung verbessert und sicherstellt, dass ihre Daten nicht automatisch gelöscht werden.

6. Behandeln Sie Speicherfehler ordnungsgemäß

Seien Sie darauf vorbereitet, Speicherfehler wie QuotaExceededError zu behandeln, die auftreten können, wenn Ihre Anwendung ihr Storage-Kontingent überschreitet. Stellen Sie dem Benutzer informative Fehlermeldungen bereit und schlagen Sie mögliche Lösungen vor (z. B. Löschen des Speichers, Aktualisieren des Speicherplans).

7. Erwägen Sie die Verwendung von Service Workern

Service Worker können die Offline-Funktionen Ihrer Webanwendung erheblich verbessern, indem sie statische Assets und API-Antworten zwischenspeichern. Achten Sie bei der Verwendung von Service Workern auf das Storage-Kontingent und implementieren Sie Strategien zur effektiven Verwaltung des Caches.

Internationalisierungsaspekte

Berücksichtigen Sie bei der Gestaltung der Speichermanagement-Benutzeroberfläche Ihrer Anwendung die folgenden Internationalisierungsaspekte (i18n):

• Zahlenformatierung: Verwenden Sie bei der Anzeige von Speichernutzungswerten die entsprechende Zahlenformatierung für verschiedene Gebietsschemata. In einigen Gebietsschemata werden beispielsweise Kommas als Dezimaltrennzeichen verwendet, in anderen werden Punkte verwendet. Verwenden Sie die Methode toLocaleString() von JavaScript, um Zahlen entsprechend dem Gebietsschema des Benutzers zu formatieren.
• Datums- und Uhrzeitformatierung: Wenn Ihre Anwendung Datums- und Uhrzeiten speichert, formatieren Sie sie entsprechend dem Gebietsschema des Benutzers, wenn Sie sie in der Speichermanagement-Benutzeroberfläche anzeigen. Verwenden Sie die Methoden toLocaleDateString() und toLocaleTimeString() von JavaScript für die gebietsschemakonforme Datums- und Uhrzeitformatierung.
• Lokalisierung der Einheiten: Erwägen Sie die Lokalisierung von Speichereinheiten (z. B. KB, MB, GB), um sie an die in verschiedenen Regionen verwendeten Konventionen anzupassen. Obwohl die Standardeinheiten weithin verstanden werden, kann die Bereitstellung lokalisierter Alternativen das Benutzererlebnis verbessern.
• Textrichtung: Stellen Sie sicher, dass Ihre Speichermanagement-Benutzeroberfläche sowohl Textrichtungen von links nach rechts (LTR) als auch von rechts nach links (RTL) unterstützt. Verwenden Sie CSS-Eigenschaften wie direction und unicode-bidi, um die Textrichtung korrekt zu verarbeiten.

Sicherheitsaspekte

Beim Umgang mit persistentem Speicher ist Sicherheit von größter Bedeutung. Befolgen Sie diese Sicherheitsbest Practices:

• Verwenden Sie HTTPS: Dienen Sie Ihre Anwendung immer über HTTPS, um Daten während der Übertragung zu schützen und Man-in-the-Middle-Angriffe zu verhindern. HTTPS ist auch eine Voraussetzung für persistenten Speicher in vielen Browsern.
• Bereinigen Sie die Benutzereingabe: Bereinigen Sie alle Benutzereingaben, bevor Sie sie speichern, um Cross-Site-Scripting-Schwachstellen (XSS) zu verhindern.
• Verschlüsseln Sie sensible Daten: Verschlüsseln Sie sensible Daten, bevor Sie sie lokal speichern, um sie vor unbefugtem Zugriff zu schützen. Erwägen Sie die Verwendung der Web Crypto API zur Verschlüsselung.
• Implementieren Sie sichere Datenverarbeitungspraktiken: Befolgen Sie sichere Codierungspraktiken, um Datenlecks zu verhindern und die Integrität Ihrer gespeicherten Daten sicherzustellen.
• Überprüfen und aktualisieren Sie Ihren Code regelmäßig: Bleiben Sie über die neuesten Sicherheitsbedrohungen und -schwachstellen auf dem Laufenden und überprüfen und aktualisieren Sie Ihren Code regelmäßig, um diese zu beheben.

Beispiele aus verschiedenen Regionen

Betrachten wir, wie sich die Storage-Kontingentverwaltung in verschiedenen Regionen unterscheiden könnte:

• Regionen mit begrenzter Bandbreite: In Regionen mit begrenzter oder teurer Internetbandbreite sind Benutzer möglicherweise stärker auf Offline-Zugriff und Caching angewiesen. Daher sollten Anwendungen eine effiziente Speichernutzung priorisieren und klare Anweisungen zur Verwaltung zwischengespeicherter Daten geben. In einigen Teilen Afrikas oder Südostasiens sind beispielsweise die Datenkosten ein wichtiges Anliegen.
• Regionen mit Datenschutzbestimmungen: In Regionen mit strengen Datenschutzbestimmungen, wie z. B. der Europäischen Union (DSGVO), müssen Anwendungen transparent sein, wie sie Speicher verwenden, und die ausdrückliche Zustimmung der Benutzer einholen, bevor sie personenbezogene Daten speichern. Sie müssen den Benutzern auch die Möglichkeit geben, auf ihre Daten zuzugreifen, sie zu berichtigen und zu löschen.
• Regionen mit älteren Geräten: In Regionen, in denen Benutzer eher ältere oder weniger leistungsstarke Geräte verwenden, sollten Anwendungen die Speichernutzung besonders berücksichtigen und ihre Datenspeicherung optimieren, um die Auswirkungen auf die Geräteleistung zu minimieren.
• Regionen mit spezifischen Sprachanforderungen: Speichermanagement-Benutzeroberflächen müssen vollständig lokalisiert sein und Zahlenformate (z. B. Kommas oder Punkte als Dezimaltrennzeichen), Datums-/Zeitformate und die richtige Textrichtung berücksichtigen.

Beispiel: Eine Nachrichtenanwendung, die sich an Benutzer in Indien richtet, könnte es Benutzern ermöglichen, Nachrichtenartikel zur Offline-Lektüre herunterzuladen, wobei die Möglichkeit einer intermittierenden Internetverbindung erkannt wird. Die Anwendung würde auch eine übersichtliche Speichermanagement-Benutzeroberfläche in mehreren indischen Sprachen bereitstellen, die es Benutzern ermöglicht, heruntergeladene Artikel einfach zu löschen, um Speicherplatz freizugeben.

Die Zukunft der Storage-APIs

Die Persistent Storage API entwickelt sich ständig weiter, und neue Funktionen und Fähigkeiten werden hinzugefügt, um den wachsenden Anforderungen moderner Webanwendungen gerecht zu werden. Einige potenzielle zukünftige Entwicklungen umfassen:

• Verbessertes Storage-Kontingent-Management: Feinere Kontrolle über das Storage-Kontingent, sodass Anwendungen bestimmte Speichermengen verschiedenen Datentypen zuordnen können.
• Integration mit Cloud-Speicher: Nahtlose Integration mit Cloud-Speicherdiensten, sodass Anwendungen Daten transparent in der Cloud speichern können, wenn der lokale Speicher begrenzt ist.
• Erweiterte Datensynchronisierung: Ausgefeiltere Datensynchronisierungsmechanismen, die es Anwendungen ermöglichen, Daten effizient zwischen lokalem Speicher und der Cloud zu synchronisieren.
• Standardisierte Speicherverschlüsselung: Eine standardisierte API zum Verschlüsseln von Daten, die im lokalen Speicher gespeichert werden, wodurch der Prozess der Sicherung sensibler Daten vereinfacht wird.

Fazit

Die Persistent Storage API ist ein leistungsstarkes Werkzeug für Webentwickler, die robuste und benutzerfreundliche Webanwendungen erstellen möchten, die reichhaltige Offline-Erlebnisse bieten können. Indem Sie die Storage-Kontingentverwaltung verstehen, persistenten Speicher anfordern und Best Practices für Datenspeicherung und -sicherheit befolgen, können Sie Anwendungen erstellen, die zuverlässig, performant und die Privatsphäre der Benutzer respektieren. Da sich das Web weiterentwickelt, wird die Persistent Storage API eine immer wichtigere Rolle bei der Ermöglichung der nächsten Generation von Webanwendungen spielen.

Weitere Lektüre

• MDN Web Docs: Storage API
• web.dev: Storage for the web
• WICG: Storage Quota API