JavaScript et StorageManager

Articles

Cet article explique JavaScript et StorageManager.

Nous expliquerons en détail les fonctionnalités de StorageManager et présenterons étape par étape comment l'utiliser avec des exemples de code fonctionnant réellement dans le navigateur.

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

Les fonctionnalités de stockage web telles que localStorage et IndexedDB dans les navigateurs sont essentielles pour enregistrer l’état et les données des applications localement sur l’appareil de l’utilisateur. Cependant, si les informations concernant la gestion de la capacité de stockage et la persistance sont insuffisantes, une perte de données inattendue peut survenir.

StorageManager est une API fournie par les agents utilisateurs (principalement les navigateurs) qui permet d’obtenir et de gérer des informations sur l’utilisation et la persistance du stockage.

Qu'est-ce que StorageManager ?

StorageManager est un objet accessible via navigator.storage, offrant les principales fonctionnalités suivantes :.

Récupérer les informations sur l’espace de stockage utilisé et disponible (navigator.storage.estimate())
Vérifier l'état de persistance du stockage (navigator.storage.persisted())
Demander la persistance du stockage (navigator.storage.persist())

Cela est particulièrement utile si vous souhaitez garantir la persistance du stockage dans les Service Workers ou les PWAs (Progressive Web Apps).

Vérification de la disponibilité

Tout d’abord, vérifiez si le navigateur prend en charge 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}

Vous pouvez déterminer la prise en charge en vérifiant si l’objet navigator.storage existe et contient la méthode estimate.

Récupérer l’utilisation du stockage

En utilisant navigator.storage.estimate(), vous pouvez connaître l’espace utilisé par votre application ainsi que le quota total de stockage.

 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 représente l’utilisation actuelle en octets, et quota est la capacité maximale disponible. Vous pouvez surveiller l’utilisation du stockage pour avertir l’utilisateur si votre application approche la limite de stockage, entre autres usages.

Vérification de la persistance du stockage

Dans de nombreux navigateurs, le stockage est sauvegardé en tant que « temporaire », ce qui signifie qu’il peut être automatiquement supprimé si l’espace disque devient insuffisant. En utilisant la méthode persisted(), vous pouvez vérifier si le stockage actuel est persistant.

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

Demander la persistance du stockage

Si ce n’est pas déjà le cas, vous pouvez demander la persistance au navigateur en utilisant persist(). Cependant, cela peut être refusé selon des actions explicites de l’utilisateur ou certaines conditions.

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

Dans de nombreux navigateurs, le respect des conditions suivantes augmente les chances d’obtenir l’approbation de la persistance :.

L’application est installée comme une PWA
L’utilisateur utilise fréquemment l’application
L’application fonctionne dans un environnement HTTPS
La demande de persistance est liée à une action explicite de l’utilisateur, comme un clic

Exemple pratique : demander la persistance à l’utilisateur lorsque ce n’est pas déjà le cas

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

Dans cet exemple, la persistance est demandée lorsque l’utilisateur clique sur un bouton. Utiliser un bouton permet de faire la demande dans le contexte d’une action de l’utilisateur, ce qui augmente les chances de succès.

Précautions et compatibilité

navigator.storage n’est disponible que dans les environnements HTTPS.
Les principaux navigateurs (Chrome, Edge, Firefox) le prennent en charge, mais certaines fonctionnalités sont limitées dans Safari.
quota dépend des conditions de stockage de l’appareil, et peut avoir des valeurs différentes selon les appareils pour un même site.

Résumé

En utilisant StorageManager, les applications web peuvent exploiter le stockage local de l’utilisateur de manière plus sûre et stratégique. Il offre principalement les fonctionnalités suivantes :.

Vous pouvez vérifier l’utilisation du stockage avec estimate().
Vous pouvez vérifier l’état de persistance avec persisted().
Vous pouvez demander la persistance avec persist().

Lors du développement de PWAs ou d’applications offline-first, l’utilisation de StorageManager vous permet d’améliorer à la fois l’expérience utilisateur et la protection des données.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

JavaScript et IndexedDB