Cómo almacenar datos en el Navegador con LocalStorage y SessionStorage

En Desarrollo web, la capacidad de almacenar datos en el navegador es útil para mejorar la experiencia del usuario y la funcionalidad de la aplicación. Para ellos existen dos formar: LocalStorage y SessionStorage. Ambos proporcionan una manera sencilla de almacenar datos en el lado del cliente.

Web Storage

Web Storage es una API que permite a las aplicaciones web almacenar datos en el navegador del usuario de manera eficiente y segura. Fue introducida con HTML5 y ofrece dos mecanismos de almacenamiento clave:

LocalStorage: Los datos almacenados en LocalStorage no tienen fecha de expiración y persisten incluso cuando el navegador se cierra. Es útil para almacenar datos que deben mantenerse entre sesiones del navegador.
SessionStorage: Los datos almacenados en SessionStorage solo se mantienen durante la sesión de la página. Una vez que se cierra la pestaña o ventana del navegador, los datos se eliminan.

Usos Comunes

LocalStorage	SessionStorage
Guardar preferencias de usuario (temas, idioma, etc.). Datos que deben persistir entre visitas, como tokens de autenticación. Carritos de compra que deben ser persistentes.	Datos temporales, sólo relevantes durante la sesión, como formularios no enviados. Información de navegación temporal, como el historial de paginas visitadas. Estado de la interfaz de usuario que no necesita ser persistente.

Como utilizar Web Storage

Ambos objetos: localStorage y sessionStorage, ofrecen métodos similares para interactuar con los datos almacenados.

`setItem(key, value)`	Almacena un nuevo dato en el storage.
`getItem(key)`	Obtiene el valor asociado con la clave especificada.
`removeItem(key)`	Elimina el valor asociado con la clave especificada.
`clear()`	Elimina todas las claves guardadas en el storage.

Ejemplos

Primero veamos como se guardan datos:


localStorage.setItem('language', 'en');        // LocalStorage
sessionStorage.setItem('page', 'home');        // SessionStorage

Para leer los datos guardados en el storage:


let lang = localStorage.getItem('language');   // LocalStorage
let page = sessionStorage.getItem('page');     // SessionStorage

Para eliminar los datos guardados en el storage:


localStorage.removeItem('language');           // LocalStorage
sessionStorage.removeItem('page');             // SessionStorage

Para eliminar todos los datos guardados:


localStorage.clear();                          // LocalStorage
sessionStorage.clear();                        // SessionStorage

Ejemplo Práctico

Veamos como ejemplo para una página que tiene varios temas, vamos a guardar el tema seleccionado en el localStorage y posteriormente cuando el usuario regrese vamos a mostrar directamente el tema seleccionado.


// change theme
let btn = document.getElementById('change-theme');
btn.addEventListener('click', (e) => {
    let theme = (document.body.getAttribute('data-theme') === '') ? 'dark' : '';

    document.body.setAttribute('data-theme', theme);
    // save theme on localStorage
    localStorage.setItem('theme', theme);
});

// load default theme from localStorage
let theme = localStorage.getItem('theme');
if (theme) {
    document.body.setAttribute('data-theme', theme);
}

Recomendaciones

Datos Sensibles: Evita guardar información sensible como contraseñas o datos personales ya que estos datos no están encriptados y pueden ser accesibles mediante scripts maliciosos.
Tamaño Máximo: Evita guardar mucha información, estos tipos de almacenamiento tienen un límite de tamaño, generalmente alrededor de 5MB por origen (dominio).

Conclusión

LocalStorage como SessionStorage permiten almacenar datos en el navegador del usuario. La elección entre uno u otro depende de los datos y cuánto tiempo necesitas que esos datos persistan.