67 - 💾 Almacenamiento Local en HTML: Uso Básico y Ejemplo

---

Elementos Semánticos en HTML

• ¿Qué es HTML Web Storage?
• Soporte del navegador
• Objetos de almacenamiento en la Web HTML
• El objeto local de almacenamiento
• El objeto sessionStorage
• Ejemplos de uso de Web Storage

---

¿Qué es HTML Web Storage?

HTML Web Storage es una API que permite almacenar datos de forma local en el navegador del usuario. Esta característica es parte de HTML5 y proporciona una manera de almacenar datos de forma sencilla y eficiente, sin necesidad de utilizar cookies.

Web Storage se divide en dos tipos principales: localStorage y sessionStorage. Ambos permiten almacenar pares clave-valor, pero difieren en el ámbito de tiempo de vida de los datos.

• localStorage: Almacena los datos sin fecha de caducidad, lo que significa que los datos persistirán incluso después de que el navegador se cierre.
• sessionStorage: Almacena datos durante la sesión de navegación. Los datos se eliminan cuando se cierra la pestaña o el navegador.

HTML Web Storage es ideal para aplicaciones web que requieren almacenar información de usuario de forma temporal o persistente, como configuraciones de usuario, historial de navegación, o datos de formularios.

---

Soporte del navegador

HTML Web Storage es compatible con la mayoría de los navegadores modernos, lo que permite su uso en una amplia variedad de aplicaciones web. Sin embargo, es importante tener en cuenta que el soporte puede variar entre versiones y plataformas. A continuación, se presenta una tabla que muestra el soporte de localStorage y sessionStorage en los principales navegadores.

Navegador	localStorage	sessionStorage	Notas
Google Chrome	✓	✓	Soporte completo en todas las versiones.
Mozilla Firefox	✓	✓	Soporte completo en todas las versiones.
Safari	✓	✓	Soporte completo en versiones modernas.
Microsoft Edge	✓	✓	Soporte completo en todas las versiones.
Internet Explorer	✓ (IE8+)	✓ (IE8+)	Algunas limitaciones en IE8; mejor soporte en versiones posteriores.
Opera	✓	✓	Soporte completo en todas las versiones modernas.

Es recomendable comprobar el soporte del navegador antes de implementar HTML Web Storage en aplicaciones críticas, especialmente si se espera que usuarios de navegadores más antiguos accedan a la aplicación.

---

Objetos de almacenamiento en la Web HTML

HTML Web Storage proporciona dos objetos principales para almacenar datos en el navegador: localStorage y sessionStorage. Ambos objetos utilizan una interfaz similar, pero tienen diferentes características y propósitos.

1. localStorage

El objeto localStorage permite almacenar datos de manera persistente en el navegador. Esto significa que los datos se conservarán incluso después de que el usuario cierre el navegador o apague el dispositivo.

Características:

• Almacena datos hasta que se eliminan manualmente.
• Capacidad máxima de almacenamiento de aproximadamente 5 MB (puede variar según el navegador).
• Los datos son accesibles desde cualquier pestaña o ventana del mismo origen.

2. sessionStorage

El objeto sessionStorage se utiliza para almacenar datos durante la sesión del navegador. Los datos se eliminan automáticamente cuando se cierra la pestaña o el navegador.

Características:

• Almacena datos solo durante la sesión actual.
• Capacidad máxima de almacenamiento similar a localStorage, aproximadamente 5 MB.
• Los datos son accesibles solo desde la pestaña o ventana donde se almacenaron.

Ambos objetos proporcionan métodos simples para almacenar, recuperar y eliminar datos, facilitando la gestión del almacenamiento en aplicaciones web.

---

El objeto local de almacenamiento

El objeto localStorage permite almacenar datos de forma persistente en el navegador del usuario. Esto significa que los datos permanecerán guardados incluso después de que el navegador se cierre o el dispositivo se apague.

Métodos comunes de localStorage

• setItem(key, value): Almacena un valor en localStorage bajo la clave especificada.
• getItem(key): Recupera el valor asociado con la clave especificada.
• removeItem(key): Elimina el valor asociado con la clave especificada.
• clear(): Elimina todos los pares clave-valor en localStorage.

Ejemplo:

            
              // Almacenar un valor
              localStorage.setItem('nombre', 'Juan');
  
              // Recuperar un valor
              const nombre = localStorage.getItem('nombre'); // 'Juan'
  
              // Eliminar un valor
              localStorage.removeItem('nombre');
            
          

---

El objeto sessionStorage

El objeto sessionStorage permite almacenar datos durante la sesión de navegación. Los datos se eliminan automáticamente cuando se cierra la pestaña o el navegador.

Métodos comunes de sessionStorage

• setItem(key, value): Almacena un valor en sessionStorage bajo la clave especificada.
• getItem(key): Recupera el valor asociado con la clave especificada.
• removeItem(key): Elimina el valor asociado con la clave especificada.
• clear(): Elimina todos los pares clave-valor en sessionStorage.

Ejemplo:

            
              // Almacenar un valor
              sessionStorage.setItem('sesionUsuario', 'Juan');
  
              // Recuperar un valor
              const sesionUsuario = sessionStorage.getItem('sesionUsuario'); // 'Juan'
  
              // Eliminar un valor
              sessionStorage.removeItem('sesionUsuario');
            
          

Es importante elegir entre localStorage y sessionStorage según la necesidad de persistencia de los datos en la aplicación web. Mientras que localStorage es ideal para datos que deben conservarse a largo plazo, sessionStorage es útil para datos temporales.

---

Ejemplos de uso de Web Storage

Web Storage es una herramienta poderosa que permite a los desarrolladores web almacenar datos de manera sencilla y eficiente. Aquí hay algunos ejemplos de cómo se puede utilizar localStorage y sessionStorage en aplicaciones web.

1. Almacenar preferencias del usuario

Puedes utilizar localStorage para guardar las preferencias del usuario, como el tema de la aplicación (claro u oscuro).

          
            // Almacenar el tema
            localStorage.setItem('tema', 'oscuro');
  
            // Recuperar el tema
            const tema = localStorage.getItem('tema'); // 'oscuro'
          
        

2. Guardar el estado de un formulario

Puedes guardar los datos de un formulario en sessionStorage para que el usuario no pierda su información si accidentalmente recarga la página.

          
            // Guardar datos de formulario
            document.getElementById('miFormulario').onsubmit = function() {
              sessionStorage.setItem('nombre', document.getElementById('nombre').value);
            };
  
            // Recuperar datos de formulario
            document.getElementById('nombre').value = sessionStorage.getItem('nombre');
          
        

3. Crear un carrito de compras

localStorage puede ser útil para implementar un carrito de compras donde los artículos se guardan incluso después de que el usuario cierra el navegador.

          
            // Agregar un artículo al carrito
            function agregarAlCarrito(producto) {
              let carrito = JSON.parse(localStorage.getItem('carrito')) || [];
              carrito.push(producto);
              localStorage.setItem('carrito', JSON.stringify(carrito));
            }
          
        

Estos ejemplos ilustran cómo Web Storage puede ser utilizado para mejorar la experiencia del usuario al almacenar datos de manera eficiente. Con localStorage y sessionStorage, los desarrolladores pueden construir aplicaciones más interactivas y personalizadas.

---

Ir al índice

---