JavaScript y StorageManager

Articles

Este artículo explica JavaScript y StorageManager.

Explicaremos en detalle las funciones de StorageManager e introduciremos cómo usarlo paso a paso con ejemplos de código que realmente funcionan en el navegador.

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

Las funciones de almacenamiento web como localStorage e IndexedDB en los navegadores son esenciales para guardar el estado y los datos de las aplicaciones localmente en el dispositivo del usuario. Sin embargo, si la información sobre la gestión de capacidad y la persistencia del almacenamiento es insuficiente, pueden ocurrir pérdidas de datos inesperadas.

StorageManager es una API proporcionada por los agentes de usuario (principalmente navegadores) que ofrece formas de obtener y gestionar información sobre el uso y la persistencia del almacenamiento.

¿Qué es StorageManager?

StorageManager es un objeto accesible a través de navigator.storage, que proporciona las siguientes funciones principales:.

Obtener información sobre el almacenamiento usado y disponible (navigator.storage.estimate())
Comprobar el estado de persistencia del almacenamiento (navigator.storage.persisted())
Solicitar la persistencia del almacenamiento (navigator.storage.persist())

Esto es especialmente útil si quieres asegurar almacenamiento persistente en Service Workers o PWAs (Progressive Web Apps).

Comprobando Disponibilidad

Primero, verifica si el navegador soporta 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}

Puedes determinar la compatibilidad comprobando si el objeto navigator.storage existe y contiene el método estimate.

Obtención del Uso de Almacenamiento

Usando navigator.storage.estimate(), puedes obtener el almacenamiento que tu aplicación está usando y la cuota total de almacenamiento.

 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 representa el uso actual en bytes, y quota es la capacidad máxima disponible. Puedes monitorizar el uso del almacenamiento para notificar al usuario si tu aplicación se acerca al límite de almacenamiento, entre otros usos.

Verificando la Persistencia del Almacenamiento

En muchos navegadores, el almacenamiento se guarda como 'temporal', lo que significa que puede ser eliminado automáticamente si el espacio en disco es insuficiente. Usando el método persisted(), puedes comprobar si el almacenamiento actual es persistente.

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

Solicitando la Persistencia del Almacenamiento

Si todavía no es persistente, puedes solicitar la persistencia al navegador usando persist(). Sin embargo, puede ser denegada dependiendo de acciones explícitas del usuario u otras condiciones.

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

En muchos navegadores, cumplir las siguientes condiciones incrementa la probabilidad de obtener la aprobación de persistencia:.

La aplicación está instalada como una PWA
El usuario utiliza la aplicación frecuentemente
La aplicación se ejecuta en un entorno HTTPS
La solicitud de persistencia está ligada a una acción explícita del usuario, como un clic

Ejemplo Práctico: Solicitar Persistencia al Usuario Cuando No es 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);

En este ejemplo, se solicita la persistencia cuando el usuario hace clic en un botón. Utilizar un botón hace la solicitud dentro del contexto de una acción del usuario, lo que aumenta la probabilidad de que sea concedida.

Precauciones y Compatibilidad

navigator.storage solo está disponible en entornos HTTPS.
Los principales navegadores (Chrome, Edge, Firefox) lo soportan, pero algunas funciones están limitadas en Safari.
quota depende de las condiciones de almacenamiento del dispositivo, y puede tener valores diferentes en distintos dispositivos para el mismo sitio.

Resumen

Usando StorageManager, las aplicaciones web pueden utilizar el almacenamiento local del usuario de forma más segura y estratégica. Principalmente ofrece las siguientes funciones:.

Puedes comprobar el uso del almacenamiento con estimate().
Puedes comprobar el estado de persistencia con persisted().
Puedes solicitar la persistencia con persist().

Al desarrollar PWAs o aplicaciones offline-first, utilizar StorageManager te permite lograr tanto una mejor experiencia de usuario como una mayor protección de datos.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

JavaScript e IndexedDB