localStorage: persistencia local en el navegador

Una memoria que sobrevive a la sesión

localStorage es una API del navegador que permite guardar información en el equipo del usuario de forma persistente. A diferencia de las variables de JavaScript, los datos no desaparecen al recargar la página ni al cerrar el navegador: quedan almacenados por dominio y pueden leerse en una visita posterior.

Toda la información vive dentro del navegador. No se envía automáticamente a ningún servidor.

Cómo se usa

La API es muy pequeña. Cuatro funciones cubren la mayoría de los casos:

• localStorage.setItem(clave, valor): guarda un valor con una clave.
• localStorage.getItem(clave): devuelve el valor guardado o null si no existe.
• localStorage.removeItem(clave): elimina una clave.
• localStorage.clear(): borra todo el almacenamiento del dominio.

localStorage.setItem("tema", "oscuro");

const tema = localStorage.getItem("tema");
console.log(tema); // "oscuro"

localStorage.removeItem("tema");
localStorage.clear();

Los valores se guardan como texto

localStorage solo almacena cadenas de texto. Si se guarda un número, un objeto o un arreglo, el navegador lo convierte a texto antes de guardarlo.

Guardar un objeto directamente funciona, pero devuelve un resultado poco útil:

const usuario = { nombre: "Arturo", rol: "dev" };

localStorage.setItem("usuario", usuario);
console.log(localStorage.getItem("usuario")); // "[object Object]"

Para guardar estructuras se usa JSON.stringify al escribir y JSON.parse al leer.

const usuario = { nombre: "Arturo", rol: "dev" };

localStorage.setItem("usuario", JSON.stringify(usuario));

const recuperado = JSON.parse(localStorage.getItem("usuario"));
console.log(recuperado.nombre); // "Arturo"

¿Cuándo conviene usarlo?

Casos comunes:

• Recordar el tema claro u oscuro elegido.
• Guardar si el usuario ya vio un mensaje, banner o bienvenida.
• Conservar preferencias, filtros o el estado de una interfaz.
• Mantener datos simples (carritos, borradores) sin depender del servidor.

En este mismo Sitio Web se usa para recordar si el visitante ya vio la pantalla de bienvenida, de modo que solo aparezca la primera vez que entra a la página principal.

localStorage vs sessionStorage

El navegador ofrece otra API muy parecida: sessionStorage. La diferencia principal es la duración.

Ambas comparten las mismas funciones (setItem, getItem, removeItem, clear).

Limitaciones

• El límite típico ronda entre 5 y 10 MB por dominio, según el navegador.
• Solo puede guardarse texto.
• Los datos están atados al origen (protocolo, dominio y puerto).
• No debe usarse para información sensible como contraseñas o tokens: cualquier código de la página puede leerlo.
• Las operaciones con getItem o setItem pueden lanzar excepciones si el almacenamiento está lleno o deshabilitado.

Un patrón seguro al leer es:

function leerDatos(clave) {
  try {
    return JSON.parse(localStorage.getItem(clave));
  } catch {
    return null;
  }
}

Consideraciones

localStorage es una herramienta sencilla y útil para recordar preferencias en el navegador. Su API es mínima, funciona de forma sincrónica y persiste entre visitas, pero está pensada para datos no sensibles. Para autenticación, datos críticos o sincronización entre dispositivos existen opciones más adecuadas en el servidor.

© Arturo Juárez Monroy