JavaScript und StorageManager

Articles

Dieser Artikel erklärt JavaScript und StorageManager.

Wir erklären die Funktionen des StorageManager ausführlich und zeigen Schritt für Schritt mit funktionierenden Codebeispielen im Browser, wie er genutzt wird.

YouTube Video

javascript-storage-manager.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args
119                    .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
120                    .join(" ");
121                output.appendChild(message);
122            };
123
124            // Override console.error
125            const originalError = console.error;
126            console.error = function (...args) {
127                originalError.apply(console, args);
128                const message = document.createElement('div');
129                message.textContent = args
130                    .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
131                    .join(" ");
132                message.style.color = 'red'; // Color error messages red
133                output.appendChild(message);
134            };
135        })();
136
137        document.getElementById('executeBtn').addEventListener('click', () => {
138            // Prevent multiple loads
139            if (document.getElementById('externalScript')) return;
140
141            const script = document.createElement('script');
142            script.src = 'javascript-storage-manager.js';
143            script.id = 'externalScript';
144            //script.onload = () => console.log('javascript-storage-manager.js loaded and executed.');
145            //script.onerror = () => console.log('Failed to load javascript-storage-manager.js.');
146            document.body.appendChild(script);
147        });
148    </script>
149</body>
150</html>

JavaScript und StorageManager

Webspeicher-Funktionen wie localStorage und IndexedDB in Browsern sind unverzichtbar, um den Zustand und die Daten von Anwendungen lokal auf dem Gerät des Nutzers zu speichern. Wenn jedoch Informationen zum Speicherplatzmanagement und zur Persistenz fehlen, kann es zu unerwartetem Datenverlust kommen.

StorageManager ist eine von User Agents (hauptsächlich Browsern) bereitgestellte API, die Möglichkeiten bietet, Informationen über die Nutzung und Persistenz von Speicher abzurufen und zu verwalten.

Was ist StorageManager?

StorageManager ist ein Objekt, das über navigator.storage erreichbar ist und folgende Hauptfunktionen bietet:.

Informationen über verwendeten und verfügbaren Speicher abrufen (navigator.storage.estimate())
Den Persistenzstatus des Speichers prüfen (navigator.storage.persisted())
Persistenz für den Speicher anfordern (navigator.storage.persist())

Dies ist besonders nützlich, wenn Sie dauerhaften Speicher in Service Workern oder PWAs (Progressive Web Apps) sicherstellen möchten.

Verfügbarkeit prüfen

Überprüfen Sie zuerst, ob der Browser StorageManager unterstützt.

1if ('storage' in navigator && 'estimate' in navigator.storage) {
2    console.log("StorageManager is supported.");
3} else {
4    console.warn("StorageManager is not supported in this browser.");
5}

Die Unterstützung lässt sich feststellen, indem überprüft wird, ob das Objekt navigator.storage existiert und die Methode estimate enthält.

Speichernutzung abrufen

Mit navigator.storage.estimate() können Sie sowohl den von Ihrer App verwendeten Speicher als auch das gesamte Speicherkontingent abrufen.

 1async function showStorageUsage() {
 2    if (!navigator.storage || !navigator.storage.estimate) {
 3        console.warn("StorageManager is not supported.");
 4        return;
 5    }
 6
 7    const { usage, quota } = await navigator.storage.estimate();
 8    console.log(`Used: ${(usage / 1024 / 1024).toFixed(2)} MB`);
 9    console.log(`Total: ${(quota / 1024 / 1024).toFixed(2)} MB`);
10    console.log(`Usage percentage: ${(usage / quota * 100).toFixed(2)}%`);
11}
12
13showStorageUsage();

usage steht für die aktuelle Nutzung in Byte und quota für die maximal verfügbare Kapazität. Sie können die Speichernutzung überwachen und beispielsweise den Nutzer benachrichtigen, wenn Ihre App an das Speicherlimit stößt.

Speicher-Persistenz prüfen

In vielen Browsern wird der Speicher als „temporär“ gespeichert. Das bedeutet, dass er automatisch gelöscht werden kann, wenn der Festplattenplatz knapp wird. Durch Verwendung der Methode persisted() können Sie prüfen, ob der aktuelle Speicher persistent ist.

1async function checkPersistence() {
2    const isPersisted = await navigator.storage.persisted();
3    console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();

Persistenz für den Speicher anfordern

Falls der Speicher noch nicht persistent ist, können Sie mit persist() beim Browser Persistenz anfordern. Dies kann jedoch je nach expliziter Benutzeraktion oder bestimmten Bedingungen verweigert werden.

1async function requestPersistence() {
2    const granted = await navigator.storage.persist();
3    console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();

In vielen Browsern erhöht das Erfüllen der folgenden Bedingungen die Wahrscheinlichkeit für eine Genehmigung der Persistenz:.

Die App ist als PWA installiert.
Der Nutzer verwendet die App häufig.
Die App läuft in einer HTTPS-Umgebung.
Die Persistenzanfrage ist an eine explizite Benutzeraktion – wie z. B. einen Mausklick – gebunden.

Praktisches Beispiel: Persistenz vom Nutzer anfordern, wenn sie noch nicht gesetzt ist

 1async function ensurePersistence() {
 2    const isPersisted = await navigator.storage.persisted();
 3    if (isPersisted) {
 4        console.log("Already using persistent storage.");
 5        return;
 6    }
 7
 8    const granted = await navigator.storage.persist();
 9    if (granted) {
10        alert("Storage has been set to persistent.");
11    } else {
12        alert("Unable to set persistent storage. Your data may be deleted.");
13    }
14}
15
16document.querySelector("#persistButton").addEventListener("click", ensurePersistence);

In diesem Beispiel wird die Persistenz angefordert, wenn der Nutzer auf eine Schaltfläche klickt. Durch die Verwendung einer Schaltfläche erfolgt die Anfrage im Kontext einer Benutzeraktion, was die Chancen auf Erfolg erhöht.

Hinweise und Kompatibilität

navigator.storage ist nur in HTTPS-Umgebungen verfügbar.
Große Browser (Chrome, Edge, Firefox) unterstützen es, aber einige Funktionen sind in Safari eingeschränkt.
quota hängt von den Speicherbedingungen des Geräts ab und kann für dieselbe Website auf unterschiedlichen Geräten unterschiedliche Werte haben.

Zusammenfassung

Durch die Verwendung von StorageManager können Webanwendungen den lokalen Speicher der Nutzer sicherer und strategischer nutzen. Er bietet hauptsächlich folgende Funktionen:.

Sie können die Speichernutzung mit estimate() prüfen.
Sie können den Persistenzstatus mit persisted() prüfen.
Sie können mit persist() Persistenz anfordern.

Bei der Entwicklung von PWAs oder Offline-First-Apps ermöglicht die Nutzung von StorageManager sowohl eine bessere Nutzererfahrung als auch höheren Datenschutz.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

JavaScript und IndexedDB