JavaScript och StorageManager

Articles

Den här artikeln förklarar JavaScript och StorageManager.

Vi kommer att förklara funktionerna i StorageManager i detalj och visa steg för steg hur du använder det med kodexempel som faktiskt fungerar i webbläsaren.

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

Webblagringsfunktioner som localStorage och IndexedDB i webbläsare är nödvändiga för att spara tillstånd och data för applikationer lokalt på användarens enhet. Om information om lagringskapacitetshantering och livslängd är otillräcklig kan oväntad dataförlust inträffa.

StorageManager är ett API som tillhandahålls av användaragenter (främst webbläsare) och ger sätt att hämta och hantera information om lagringens användning och livslängd.

Vad är StorageManager?

StorageManager är ett objekt som kan användas via navigator.storage och erbjuder följande huvudfunktioner:.

Hämta information om använd och tillgänglig lagring (navigator.storage.estimate())
Kontrollera lagringens livslängdsstatus (navigator.storage.persisted())
Begär lagringslivslängd (navigator.storage.persist())

Detta är särskilt användbart om du vill försäkra dig om permanent lagring i Service Workers eller PWA:er (Progressive Web Apps).

Kontrollera tillgänglighet

Kontrollera först om webbläsaren stöder 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 avgöra om stöd finns genom att kontrollera om objektet navigator.storage existerar och innehåller metoden estimate.

Hämta lagringsanvändning

Genom att använda navigator.storage.estimate() kan du få information om hur mycket lagring din app använder och den totala lagringskvotan.

 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 visar nuvarande användning i byte och quota är den maximalt tillgängliga kapaciteten. Du kan övervaka lagringsanvändningen för att exempelvis varna användaren om din app närmar sig lagringsgränsen.

Kontrollera lagringens livslängd

I många webbläsare sparas lagring som 'tillfällig', vilket innebär att den kan tas bort automatiskt om diskutrymmet blir otillräckligt. Genom att använda metoden persisted() kan du kontrollera om nuvarande lagring är permanent.

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

Begär livslängd för lagring

Om lagringen inte redan är permanent kan du begära livslängd från webbläsaren med persist(). Det kan dock nekas beroende på explicita användaråtgärder eller vissa villkor.

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

I många webbläsare ökar följande villkor sannolikheten för att få lagringslivslängd:.

Appen är installerad som en PWA
Användaren använder appen ofta
Appen körs i en HTTPS-miljö
Begäran om livslängd är kopplad till en explicit användaråtgärd, som ett klick

Praktiskt exempel: Begär livslängd från användaren när lagringen inte är permanent

 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 detta exempel begärs lagringslivslängd när användaren klickar på en knapp. Att använda en knapp innebär att begäran görs inom ramen för en användaråtgärd, vilket gör det mer troligt att den beviljas.

Varningar och kompatibilitet

navigator.storage är endast tillgänglig i HTTPS-miljöer.
De flesta större webbläsare (Chrome, Edge, Firefox) stöder det, men vissa funktioner är begränsade i Safari.
quota beror på enhetens lagringsförhållanden och kan ha olika värden på olika enheter för samma webbplats.

Sammanfattning

Genom att använda StorageManager kan webbapplikationer använda användarens lokala lagring säkrare och mer strategiskt. Det ger främst följande funktioner:.

Du kan kontrollera lagringsanvändning med estimate().
Du kan kontrollera livslängdsstatus med persisted().
Du kan begära livslängd med persist().

När du utvecklar PWAs eller offline-först-appar kan du genom att använda StorageManager både förbättra användarupplevelsen och stärka dataskyddet.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

JavaScript och IndexedDB