JavaScript og StorageManager

Articles

Denne artikkelen forklarer JavaScript og StorageManager.

Vi vil forklare funksjonene til StorageManager i detalj, og introdusere hvordan det brukes steg for steg med kodeeksempler som faktisk fungerer i nettleseren.

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

Funksjoner for nettlagring som localStorage og IndexedDB i nettlesere er avgjørende for å lagre tilstanden og dataene til applikasjoner lokalt på brukerens enhet. Men dersom informasjon om lagringskapasitet og vedvarende lagring er utilstrekkelig, kan uventet datatap oppstå.

StorageManager er et API levert av brukeragenter (hovedsakelig nettlesere) som gir muligheter for å hente og administrere informasjon om bruk og vedvarende lagring.

Hva er StorageManager?

StorageManager er et objekt som er tilgjengelig via navigator.storage, og gir følgende hovedfunksjoner:.

Hente informasjon om brukt og tilgjengelig lagring (navigator.storage.estimate())
Sjekke vedvarende status for lagring (navigator.storage.persisted())
Be om vedvarende lagring (navigator.storage.persist())

Dette er spesielt nyttig dersom du vil sikre vedvarende lagring i Service Workers eller PWA-er (Progressive Web Apps).

Sjekke tilgjengelighet

Sjekk først om nettleseren støtter StorageManager.

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}

Du kan finne ut om det støttes ved å sjekke om navigator.storage-objektet finnes og inneholder estimate-metoden.

Hente lagringsbruk

Ved å bruke navigator.storage.estimate() kan du hente hvor mye lagring appen din bruker og den totale lagringskvoten.

 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 representerer nåværende bruk i byte, og quota er maksimal tilgjengelig kapasitet. Du kan overvåke lagringsbruken for å varsle brukeren hvis appen nærmer seg lagringsgrensen, blant andre bruksområder.

Sjekke vedvarende lagring

I mange nettlesere lagres data som ‘midlertidig’, noe som betyr at det kan slettes automatisk hvis diskplassen blir utilstrekkelig. Ved å bruke persisted()-metoden kan du sjekke om den nåværende lagringen er vedvarende.

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

Be om vedvarende lagring

Hvis den ikke allerede er vedvarende, kan du be om vedvarende lagring fra nettleseren ved å bruke persist(). Det kan likevel bli avslått avhengig av eksplisitte brukerhandlinger eller visse betingelser.

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

I mange nettlesere øker det sjansen for å få vedvarende lagring dersom følgende betingelser er oppfylt:.

Appen er installert som en PWA
Brukeren bruker appen ofte
Appen kjøres i et HTTPS-miljø
Forespørselen om vedvarende lagring er knyttet til en eksplisitt brukerhandling, som for eksempel et klikk

Praktisk eksempel: Be brukeren om vedvarende lagring dersom det ikke er aktivert

 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);

I dette eksempelet blir vedvarende lagring forespurt når brukeren klikker på en knapp. Å bruke en knapp gjør at forespørselen skjer i en brukerhandling, noe som gjør det mer sannsynlig å få den godkjent.

Advarsler og kompatibilitet

navigator.storage er kun tilgjengelig i HTTPS-miljøer.
De største nettleserne (Chrome, Edge, Firefox) støtter det, men noen funksjoner er begrenset i Safari.
quota avhenger av lagringsforholdene til enheten, og kan ha forskjellige verdier på ulike enheter for samme nettsted.

Sammendrag

Ved å bruke StorageManager kan nettapplikasjoner bruke brukerens lokale lagring sikrere og mer strategisk. Den tilbyr hovedsakelig følgende funksjoner:.

Du kan sjekke lagringsbruk med estimate().
Du kan sjekke status for vedvarende lagring med persisted().
Du kan be om vedvarende lagring med persist().

Når du utvikler PWA-er eller offline-first-apper, kan du ved å bruke StorageManager både forbedre brukeropplevelsen og styrke databeskyttelsen.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

JavaScript og IndexedDB