localStorage: guardar datos en el navegador

Al finalizar este tema

Podrás usar localStorage, conocer sus limitaciones y decidir qué datos almacenar.

Datos que se pierden al recargar la página

Las variables de JavaScript se pierden al recargar la página. Si el usuario selecciona el modo oscuro, pero vuelve al modo claro cada vez que recarga, resulta incómodo.

localStorage guarda datos de forma permanente en el navegador. Permanecen intactos tras recargar o cerrar el navegador.

Uso básico

// guardar
localStorage.setItem("theme", "dark");

// leer
const theme = localStorage.getItem("theme"); // "dark"

// eliminar
localStorage.removeItem("theme");

// eliminar todo
localStorage.clear();

Se almacenan como pares clave-valor. Los valores deben ser cadenas.

Los objetos se convierten a JSON

const user = { name: "Alice", age: 25 };

// guardar — objeto como cadena
localStorage.setItem("user", JSON.stringify(user));

// leer — cadena a objeto
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name); // "Alice"

Dado que localStorage solo almacena cadenas, los objetos deben convertirse mediante JSON.stringify. Al leerlos, se restauran con JSON.parse.

Si se inserta un objeto directamente:

localStorage.setItem("user", { name: "Alice" });
localStorage.getItem("user"); // "[object Object]" — cadena inútil

localStorage vs sessionStorage

// localStorage — almacenamiento permanente
localStorage.setItem("key", "value");

// sessionStorage — se elimina al cerrar la pestaña
sessionStorage.setItem("key", "value");

sessionStorage se elimina al cerrar la pestaña del navegador y no se comparte con otras pestañas del mismo sitio. Es ideal para datos de un solo uso, como copias de seguridad de formularios que se están completando.

Consideraciones

Límite de capacidad: aproximadamente 5 MB por dominio. Es suficiente para valores de configuración pequeños, pero no almacene grandes cantidades de datos.

Solo se admiten cadenas de texto: los números y los valores booleanos se convierten a cadenas de texto.

localStorage.setItem("count", 42);
const count = localStorage.getItem("count"); // "42" (cadena)
const num = Number(count); // 42 (convertir a número)

No almacenar datos confidenciales: localStorage es accesible para cualquier usuario mediante JavaScript. Almacenar contraseñas, tokens o información personal puede provocar su robo mediante ataques XSS.

API síncrona: localStorage funciona de forma síncrona. La lectura y escritura de grandes cantidades de datos pueden bloquear el hilo principal.

Uso práctico

Datos adecuados: configuración del tema, configuración del idioma, historial de búsquedas recientes, carrito de compras (para usuarios no autenticados), estado de finalización del proceso de incorporación.

Datos inadecuados: tokens de autenticación, contraseñas, información personal del usuario, datos de gran volumen.

Conceptos clave

localStorage almacena de forma permanente pares clave-valor en forma de cadenas en el navegador. Los objetos se gestionan convirtiéndolos a JSON.stringify/JSON.parse. Nunca almacene datos confidenciales.