JavaScript e StorageManager
Questo articolo spiega JavaScript e StorageManager.
Spiegheremo in dettaglio le funzionalità di StorageManager e presenteremo come utilizzarlo passo dopo passo con esempi di codice che funzionano realmente nel browser.
YouTube Video
javascript-storage-manager.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & 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 e StorageManager
Le funzionalità di storage web come localStorage e IndexedDB nei browser sono essenziali per salvare lo stato e i dati delle applicazioni localmente sul dispositivo dell'utente. Tuttavia, se le informazioni sulla gestione della capacità di archiviazione e sulla persistenza sono insufficienti, potrebbero verificarsi perdite di dati inaspettate.
StorageManager è una API fornita dagli user agent (principalmente browser) che offre metodi per ottenere e gestire informazioni sull'utilizzo e la persistenza dello storage.
Cos’è StorageManager?
StorageManager è un oggetto accessibile tramite navigator.storage, che offre le seguenti principali funzionalità:.
- Recuperare informazioni su storage usato e disponibile (
navigator.storage.estimate()) - Verificare lo stato di persistenza dello storage (
navigator.storage.persisted()) - Richiedere la persistenza dello storage (
navigator.storage.persist())
Questo è particolarmente utile se si desidera garantire lo storage persistente nei Service Worker o nelle PWA (Progressive Web Apps).
Verifica della disponibilità
Prima di tutto, verificare se il browser supporta 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}- È possibile determinare la compatibilità verificando che l'oggetto
navigator.storageesista e contenga il metodoestimate.
Recuperare l’utilizzo dello storage
Utilizzando navigator.storage.estimate(), puoi ottenere lo spazio di archiviazione utilizzato dalla tua app e la quota di archiviazione totale.
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();usagerappresenta l’utilizzo attuale in byte, mentrequotaè la capacità massima disponibile. Puoi monitorare l’utilizzo dello storage per informare l’utente se la tua app si sta avvicinando al limite di archiviazione, o per altri usi simili.
Verificare la persistenza dello storage
In molti browser, lo storage viene salvato come 'temporaneo', il che significa che può essere eliminato automaticamente se lo spazio su disco diventa insufficiente. Utilizzando il metodo persisted(), puoi verificare se lo storage attuale è persistente.
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();Richiedere la persistenza dello storage
Se non è già persistente, puoi richiedere la persistenza dal browser utilizzando persist(). Tuttavia, la richiesta può essere negata in base ad azioni esplicite dell’utente o a determinate condizioni.
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();In molti browser, soddisfare le seguenti condizioni aumenta la probabilità che la richiesta di persistenza venga approvata:.
- L'app è installata come PWA
- L’utente usa frequentemente l’app
- L’app è in esecuzione in un ambiente HTTPS
- La richiesta di persistenza è collegata a un’azione esplicita dell’utente, come un clic
Esempio pratico: richiedere la persistenza all’utente quando non è già persistente
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 questo esempio, la richiesta di persistenza viene effettuata quando l’utente fa clic su un pulsante. L’uso di un pulsante collega la richiesta all’azione dell’utente, rendendo più probabile che venga concessa.
Avvertenze e compatibilità
navigator.storageè disponibile solo in ambienti HTTPS.- I principali browser (Chrome, Edge, Firefox) lo supportano, ma alcune funzionalità sono limitate in Safari.
quotadipende dalle condizioni di storage del dispositivo e può avere valori diversi su dispositivi diversi per lo stesso sito.
Riepilogo
Utilizzando StorageManager, le applicazioni web possono usare lo storage locale dell’utente in modo più sicuro e strategico. Fornisce principalmente le seguenti funzionalità:.
- Puoi controllare l’utilizzo dello storage con
estimate(). - Puoi verificare lo stato di persistenza con
persisted(). - Puoi richiedere la persistenza con
persist().
Durante lo sviluppo di PWA o app offline-first, sfruttare StorageManager permette di ottenere sia una migliore esperienza utente sia una maggiore protezione dei dati.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.