JavaScript og StorageManager

Articles

Denne artikel forklarer JavaScript og StorageManager.

Vi vil forklare funktionerne i StorageManager i detaljer og introducere, hvordan man bruger det trin for trin med kodeeksempler, der faktisk virker i browseren.

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

Weblagringsfunktioner som localStorage og IndexedDB i browsere er afgørende for at gemme applikationens tilstand og data lokalt på brugerens enhed. Men hvis information om lagringskapacitetsstyring og persistens er utilstrækkelig, kan der opstå uventet datatab.

StorageManager er et API leveret af brugeragenter (primært browsere), der giver mulighed for at indhente og administrere information om lagringens forbrug og persistens.

Hvad er StorageManager?

StorageManager er et objekt, der kan tilgås via navigator.storage og tilbyder følgende hovedfunktioner:.

Hent information om brugt og tilgængelig lagerplads (navigator.storage.estimate())
Tjek lagringens persistensstatus (navigator.storage.persisted())
Anmod om lagerpersistens (navigator.storage.persist())

Dette er især nyttigt, hvis du vil sikre persistent lagring i Service Workers eller PWAs (Progressive Web Apps).

Tjekker tilgængelighed

Først skal du kontrollere, om browseren understø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 afgøre understøttelsen ved at kontrollere, om objektet navigator.storage findes og indeholder metoden estimate.

Hentning af lagerforbrug

Ved at bruge navigator.storage.estimate() kan du få det lager, din app bruger, samt den samlede lagringskvote.

 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 angiver det aktuelle forbrug i bytes, og quota er den maksimalt tilgængelige kapacitet. Du kan overvåge lagerforbruget for f.eks. at give brugeren besked, hvis din app nærmer sig lagergrænsen.

Tjek af lagerpersistens

I mange browsere gemmes lagring som 'midlertidig', hvilket betyder, at den automatisk kan blive slettet, hvis diskkapaciteten bliver utilstrækkelig. Ved at bruge metoden persisted() kan du kontrollere, om den aktuelle lagring er persistent.

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

Anmodning om lagerpersistens

Hvis det ikke allerede er persistent, kan du anmode browseren om at gøre lagringen persistent ved at bruge persist(). Dog kan det blive afvist afhængigt af eksplicitte brugerhandlinger 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 browsere øger opfyldelse af følgende betingelser sandsynligheden for at få godkendt persistens:.

Appen er installeret som en PWA
Brugeren bruger ofte appen
Appen kører i et HTTPS-miljø
Anmodningen om persistens er knyttet til en eksplicit brugerhandling, som for eksempel et klik

Praktisk eksempel: Anmod om persistens fra brugeren, når der ikke allerede er persistens

 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 eksempel anmodes der om persistens, når brugeren klikker på en knap. Brug af en knap gør anmodningen i forbindelse med en brugerhandling, hvilket øger sandsynligheden for at få tilladelsen.

Forsigtighed og kompatibilitet

navigator.storage er kun tilgængelig i HTTPS-miljøer.
De største browsere (Chrome, Edge, Firefox) understøtter det, men nogle funktioner er begrænsede i Safari.
quota afhænger af enhedens lagringsforhold og kan have forskellige værdier på forskellige enheder, selv for det samme site.

Sammendrag

Ved at bruge StorageManager kan webapplikationer bruge brugerens lokale lagring mere sikkert og strategisk. Det giver primært følgende funktioner:.

Du kan tjekke lagerforbruget med estimate().
Du kan tjekke persistensstatus med persisted().
Du kan anmode om persistens med persist().

Når du udvikler PWAs eller offline-first apps, giver brugen af StorageManager dig mulighed for både at forbedre brugeroplevelsen og øge databeskyttelsen.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

JavaScript og IndexedDB