Permanentspeicher

Nichtflüchtiger Speicher kann dazu beitragen, kritische Daten vor der Bereinigung zu schützen und das Risiko eines Datenverlusts zu verringern.

Pete LePage

Bei Speichermangel wie wenig Speicherplatz in der Regel Daten entfernen, z. B. aus der Cache API und IndexedDB, aus dem am wenigsten verwendeten Ursprung. Das kann zu Datenverlusten führen, keine Daten mit dem Server synchronisiert hat und die Zuverlässigkeit der App Ressourcen entfernen, die für das Funktionieren der App erforderlich sind. Beides führt zu negativen User Experiences haben.

Glücklicherweise haben Untersuchungen des Chrome-Teams ergeben, dass Daten nur sehr selten automatisch von Chrome gelöscht. Es ist weitaus üblicher, dass Nutzende manuell Speicherinhalt löschen. Besucht ein Nutzer Ihre Website regelmäßig, ist es wahrscheinlich, dass Ihre Daten entfernt werden. Um zu verhindern, dass der Browser Ihrer Daten können Sie beantragen, dass der gesamte Speicherplatz dauerhaft.

Nichtflüchtiger Speicher wird in vielen modernen Browsern unterstützt.

Unterstützte Browser

  • Chrome: 55 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 57. <ph type="x-smartling-placeholder">
  • Safari: 15.2 <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen zur Bereinigung, zum Speicherbedarf und zum Umgang mit Kontingenten finden Sie unter Speicher für das Web.

Prüfen, ob der Speicher Ihrer Website als persistent markiert wurde

Mithilfe von JavaScript können Sie feststellen, ob der Speicherplatz auf Ihrer Website als dauerhaft. Der Aufruf von navigator.storage.persisted() gibt ein Versprechen zurück, wird mit einem booleschen Wert aufgelöst, der angibt, ob der Speicher als beibehalten.

// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persisted();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

Wann sollte ich um dauerhaften Speicher bitten?

Der beste Zeitpunkt, um anzufordern, dass Ihr Speicher als persistent markiert wird, ist, wenn Sie wichtige Nutzerdaten speichern können. Idealerweise sollte die Anfrage Touch-Geste. Nicht nach dauerhaftem Speicher beim Seitenaufbau oder in einem anderen Bootstrap fragen Code eingeben, fordert der Browser den Nutzer möglicherweise um die Berechtigung. Wenn der Nutzer nichts tut, was ihrer Meinung nach gespeichert werden muss, könnte der Prompt und wird die Anfrage wahrscheinlich ablehnen. Außerdem sollten Sie zu häufig. Hat der Nutzer die Berechtigung nicht erteilt, tun Sie dies nicht sofort. wird die Aufforderung beim nächsten Speichern noch einmal angezeigt.

Nichtflüchtigen Speicher anfordern

Um dauerhaften Speicher für Ihre Websitedaten anzufordern, rufen Sie navigator.storage.persist() Sie gibt ein Promise zurück, das mit einem Boolescher Wert, der angibt, ob die Berechtigung für nichtflüchtigen Speicher gewährt wurde.

// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persist();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

Wie wird die Berechtigung erteilt?

Nichtflüchtiger Speicher wird als Berechtigung behandelt. Browser verwenden um zu entscheiden, ob Berechtigungen für nichtflüchtigen Speicher gewährt werden sollen.

Chrome und andere Chromium-basierte Browser

Chrome und die meisten anderen Chromium-basierten Browser verarbeiten automatisch den Berechtigungsanfrage gesendet und dem Nutzer werden keine Aufforderungen angezeigt. Wenn stattdessen ein wird als wichtig erachtet, ist die Berechtigung zur dauerhaften Speicherung automatisch gewährt, andernfalls wird sie ohne Meldung abgelehnt.

Folgende Heuristiken können verwendet werden, um festzustellen, ob eine Website wichtig ist:

  • Wie hoch ist das Interesse an der Website?
  • Wurde die Website installiert oder als Lesezeichen gespeichert?
  • Wurde der Website die Berechtigung zum Anzeigen von Benachrichtigungen gewährt?

Wenn die Anfrage abgelehnt wurde, kann sie später noch einmal angefordert werden und wird mit derselben Heuristik ausgewertet.

Firefox

Firefox delegiert die Berechtigungsanfrage an den Nutzer. Bei dauerhafter Speicherung angefordert wird, erscheint ein UI-Pop-up, in dem der Nutzer gefragt wird, um Daten im nichtflüchtigen Speicher zu speichern.

<ph type="x-smartling-placeholder">
</ph> Ein Pop-up, das von Firefox angezeigt wird, wenn eine Website nichtflüchtigen Speicher anfordert. <ph type="x-smartling-placeholder">
</ph> Ein Pop-up, das von Firefox angezeigt wird, wenn eine Website nichtflüchtigen Speicher anfordert.

Welcher Speicher wird durch nichtflüchtigen Speicher geschützt?

Wenn die Berechtigung für nichtflüchtigen Speicher gewährt wird, wird der Browser nicht entfernt Daten gespeichert in:

  • Cache-API
  • Kekse
  • DOM-Speicher (lokaler Speicher)
  • File System API (vom Browser bereitgestelltes und in einer Sandbox ausgeführtes Dateisystem)
  • IndexedDB
  • Service Worker
  • App-Cache (eingestellt, sollte nicht verwendet werden)
  • WebSQL (eingestellt, sollte nicht verwendet werden)

Nichtflüchtigen Speicher deaktivieren

Derzeit gibt es keine programmatische Möglichkeit, dem Browser mitzuteilen, dass Sie beständigen Speicher benötigen.

Fazit

Untersuchungen des Chrome-Teams zeigen, dass gespeicherte Daten zwar möglich sind, selten automatisch von Chrome gelöscht. Zum Schutz kritischer Daten, die möglicherweise nicht in der Cloud gespeichert werden oder zu erheblichen Datenverlusten führen, nichtflüchtiger Speicher kann ein nützliches Tool sein, um sicherzustellen, werden vom Browser entfernt, wenn das lokale Gerät mit Speichermangel konfrontiert ist. Wichtig: Fordern Sie nur dann nichtflüchtigen Speicher an, wenn die Wahrscheinlichkeit sie wollen.

Vielen Dank

Vielen Dank an Victor Costan und Joe Medley für die Bewertung dieses Artikels. Vielen Dank an Chris Wilson, der die Originalversion dieses Artikels verfasst hat, erstmals bei WebFundamentals.

Hero-Image von Umberto auf Unsplash