Cómo usar localStorage y sessionStorage en JavaScript para almacenar datos

El almacenamiento web en JavaScript proporciona dos métodos muy útiles: localStorage y sessionStorage. Ambos permiten a los desarrolladores almacenar datos en el navegador del cliente, lo que puede ser útil para mejorar la experiencia del usuario y la funcionalidad de las aplicaciones web. En este artículo, exploraremos cómo funcionan localStorage y sessionStorage, sus diferencias y cómo utilizarlos de manera efectiva.

¿Qué es localStorage?

localStorage es una característica de la Web Storage API que permite almacenar datos en el navegador del usuario de forma persistente. Los datos almacenados en localStorage no tienen fecha de caducidad y permanecen disponibles incluso después de cerrar el navegador.

Características de localStorage

Persistente: Los datos se guardan indefinidamente, a menos que se eliminen explícitamente.
Capacidad: La mayoría de los navegadores permiten almacenar al menos 5 MB de datos.
Accesibilidad: Los datos almacenados pueden ser accedidos desde cualquier pestaña o ventana del mismo origen.

¿Qué es sessionStorage?

sessionStorage, por otro lado, es también parte de la Web Storage API, pero los datos que se almacenan en él tienen un alcance limitado a la sesión del navegador. Esto significa que los datos solo estarán disponibles mientras la pestaña o ventana del navegador esté abierta.

Características de sessionStorage

Temporal: Los datos solo se conservan durante la sesión actual del navegador.
Alcance: A diferencia de localStorage, los datos no son accesibles desde pestañas o ventanas diferentes, incluso si el origen es el mismo.
Capacidad: También permite almacenar al menos 5 MB de datos en la mayoría de los navegadores.

Diferencias clave entre localStorage y sessionStorage

Ambos tipos de almacenamiento pueden parecer similares, pero sus diferencias son cruciales para decidir cuál utilizar en función de las necesidades de la aplicación:

Cómo usar localStorage

Almacenar datos en localStorage

Para almacenar datos en localStorage, utilizamos el método setItem(). Este método requiere dos argumentos: una clave y un valor.

localStorage.setItem('nombre', 'Juan');
localStorage.setItem('edad', '30');

Recuperar datos de localStorage

Para recuperar datos, usamos el método getItem(), proporcionando la clave correspondiente.

const nombre = localStorage.getItem('nombre');
const edad = localStorage.getItem('edad');

console.log(nombre); // Juan
console.log(edad);   // 30

Eliminar datos de localStorage

Si deseas eliminar un dato específico, utiliza el método removeItem().

localStorage.removeItem('edad');

Borrar todos los datos en localStorage

Para eliminar todos los datos almacenados en localStorage, utiliza el método clear().

localStorage.clear();

Cómo usar sessionStorage

Almacenar datos en sessionStorage

Similar a localStorage, puedes almacenar datos en sessionStorage utilizando setItem().

sessionStorage.setItem('sesionID', '12345ABC');
sessionStorage.setItem('usuario', 'admin');

Recuperar datos de sessionStorage

Para recuperar los datos, utilizamos getItem() de la misma manera que en localStorage.

const sesionID = sessionStorage.getItem('sesionID');
const usuario = sessionStorage.getItem('usuario');

console.log(sesionID);  // 12345ABC
console.log(usuario);    // admin

Eliminar datos de sessionStorage

Para eliminar un dato específico, utiliza removeItem():

sessionStorage.removeItem('usuario');

Borrar todos los datos en sessionStorage

Al igual que con localStorage, puedes eliminar todos los datos de sessionStorage utilizando clear():

sessionStorage.clear();

Ejemplo práctico de uso

Imaginemos que queremos almacenar las preferencias de un usuario en nuestra aplicación. Podemos usar localStorage para guardar estas preferencias de manera que persistan incluso si el usuario cierra el navegador.

function guardarPreferencias(preferencias) {
    localStorage.setItem('preferenciasUsuario', JSON.stringify(preferencias));
}

function obtenerPreferencias() {
    const preferencias = localStorage.getItem('preferenciasUsuario');
    return preferencias ? JSON.parse(preferencias) : null;
}

// Uso
const preferencias = {
    tema: 'oscuro',
    notificaciones: true
};

guardarPreferencias(preferencias);
console.log(obtenerPreferencias()); // { tema: 'oscuro', notificaciones: true }

Por otro lado, podemos usar sessionStorage para guardar información temporal sobre el estado de un formulario que no queremos que persista una vez que la pestaña se cierra.

function guardarFormulario(data) {
    sessionStorage.setItem('formularioData', JSON.stringify(data));
}

function obtenerFormulario() {
    const data = sessionStorage.getItem('formularioData');
    return data ? JSON.parse(data) : null;
}

// Uso
const formularioData = {
    nombre: 'Ana',
    email: '[email protected]'
};

guardarFormulario(formularioData);
console.log(obtenerFormulario()); // { nombre: 'Ana', email: '[email protected]' }

Consideraciones de seguridad

Aunque localStorage y sessionStorage son herramientas útiles, deben usarse con precaución. Aquí hay algunas consideraciones importantes:

No almacenar información sensible: Nunca almacenes contraseñas, información bancaria, o datos sensibles en el almacenamiento del navegador.
Vulnerabilidad a ataques XSS: Los datos en localStorage y sessionStorage son vulnerables a ataques de cross-site scripting (XSS). Asegúrate de validar y limpiar las entradas del usuario.
Compatibilidad: Aunque la mayoría de los navegadores modernos soportan localStorage y sessionStorage, siempre es recomendable verificar la compatibilidad.

Conclusión

localStorage y sessionStorage son herramientas poderosas para almacenar datos en el navegador utilizando JavaScript. Cada uno tiene sus propias características y debe ser seleccionado en función de las necesidades específicas de tu aplicación. Al aprender a implementarlos correctamente, podrás mejorar la experiencia del usuario y optimizar el rendimiento de tus aplicaciones web. Recuerda siempre tener en cuenta la seguridad al almacenar datos sensibles y validar la información de entrada del usuario.