JavaScript en StorageManager

Articles

Dit artikel legt JavaScript en StorageManager uit.

We leggen de functies van StorageManager in detail uit en laten zien hoe je deze stap voor stap gebruikt met codevoorbeelden die daadwerkelijk werken in de browser.

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 en StorageManager

Webopslagfuncties zoals localStorage en IndexedDB in browsers zijn essentieel om de status en gegevens van applicaties lokaal op het apparaat van de gebruiker op te slaan. Als informatie over beheer van opslagcapaciteit en persistentie echter onvoldoende is, kan onverwacht gegevensverlies optreden.

StorageManager is een API aangeboden door user agents (voornamelijk browsers) die manieren biedt om informatie over het gebruik en de persistentie van opslag te verkrijgen en te beheren.

Wat is StorageManager?

StorageManager is een object toegankelijk via navigator.storage en biedt de volgende hoofdkenmerken:.

Informatie ophalen over gebruikte en beschikbare opslag (navigator.storage.estimate())
De persistentiestatus van opslag controleren (navigator.storage.persisted())
Opslagpersistentie aanvragen (navigator.storage.persist())

Dit is vooral handig als je persistente opslag wilt garanderen in Service Workers of PWA's (Progressive Web Apps).

Beschikbaarheid controleren

Controleer eerst of de browser StorageManager ondersteunt.

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}

Je kunt de ondersteuning bepalen door te controleren of het navigator.storage object bestaat en de estimate-methode bevat.

Opslaggebruik ophalen

Met navigator.storage.estimate() kun je zowel de opslag die jouw app gebruikt als de totale opslagquota opvragen.

 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 geeft het huidige gebruik in bytes weer, en quota is de maximaal beschikbare capaciteit. Je kunt het opslaggebruik monitoren om de gebruiker te waarschuwen als jouw app de opslaglimiet nadert, naast andere toepassingen.

Opslagpersistentie controleren

In veel browsers wordt opslag als 'tijdelijk' opgeslagen, wat betekent dat deze automatisch kan worden verwijderd als de schijfruimte onvoldoende wordt. Met de persisted()-methode kun je controleren of de huidige opslag persistent is.

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

Opslagpersistentie aanvragen

Als het nog niet persistent is, kun je persistentie aanvragen via de browser met persist(). Het kan echter ook worden geweigerd, afhankelijk van expliciete gebruikersacties of bepaalde omstandigheden.

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

In veel browsers vergroot het voldoen aan de volgende voorwaarden de kans op goedkeuring van persistentie:.

De app is geïnstalleerd als een PWA
De gebruiker gebruikt de app regelmatig
De app draait in een HTTPS-omgeving
Het persistentieverzoek is gekoppeld aan een expliciete gebruikersactie, zoals een klik

Praktisch voorbeeld: persistentie van de gebruiker aanvragen wanneer deze niet persistent is

 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 dit voorbeeld wordt persistentie aangevraagd wanneer de gebruiker op een knop klikt. Door een knop te gebruiken doe je het verzoek binnen de context van een gebruikersactie, waardoor het waarschijnlijker wordt toegekend.

Let op en compatibiliteit

navigator.storage is alleen beschikbaar in HTTPS-omgevingen.
Grote browsers (Chrome, Edge, Firefox) ondersteunen het, maar sommige functies zijn beperkt in Safari.
quota is afhankelijk van de opslagcondities van het apparaat en kan voor dezelfde site verschillende waarden hebben op verschillende apparaten.

Samenvatting

Met StorageManager kunnen webapplicaties de lokale opslag van de gebruiker veiliger en strategischer inzetten. Het biedt voornamelijk de volgende functies:.

Je kunt het opslaggebruik controleren met estimate().
Je kunt de persistentiestatus controleren met persisted().
Je kunt persistentie aanvragen met persist().

Bij het ontwikkelen van PWA's of offline-first apps kun je met StorageManager zowel de gebruikerservaring verbeteren als de gegevensbescherming versterken.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

JavaScript en IndexedDB