LocalStorage en JavaScript: guardar y recuperar datos

LocalStorage en JavaScript permite guardar pares de clave y valor en el navegador, asociados al origen del sitio. Normalmente conserva esos datos entre sesiones, pero el usuario, sus políticas o el navegador pueden eliminarlos o impedir el acceso.

Resulta útil para preferencias no sensibles, como un tema visual. No sustituye una base de datos compartida ni garantiza que la información esté disponible en otro dispositivo.

SetItem, getItem y removeItem

localStorage.setItem("idioma", "es");
console.log(localStorage.getItem("idioma")); // es
localStorage.removeItem("idioma");
console.log(localStorage.getItem("idioma")); // null

Las claves y valores se guardan como cadenas. Si la clave no existe, getItem devuelve null. Evita usar clear para borrar una única preferencia: elimina todas las claves de ese almacenamiento para el origen.

Ejemplo completo: recordar una preferencia

<label>
  <input type="checkbox" id="compacto">
  Usar vista compacta
</label>
<p id="estado" role="status"></p>
<script>
  const control = document.querySelector("#compacto");
  const estado = document.querySelector("#estado");
  const clave = "mcp:vista-compacta";

  try {
    control.checked = localStorage.getItem(clave) === "true";
  } catch (error) {
    estado.textContent = "La preferencia no se puede recuperar.";
  }

  function aplicarVista() {
    document.body.classList.toggle("compacta", control.checked);
  }
  aplicarVista();

  control.addEventListener("change", () => {
    aplicarVista();
    try {
      localStorage.setItem(clave, String(control.checked));
      estado.textContent = "Preferencia guardada.";
    } catch (error) {
      estado.textContent = "La vista cambió, pero no pudo guardarse.";
    }
  });
</script>
<style>
  body { padding: 32px; line-height: 1.7; }
  body.compacta { padding: 16px; line-height: 1.4; }
</style>

La preferencia sigue funcionando en esa página aunque falle el guardado. El valor se compara con la cadena exacta «true»: convertir «false» mediante Boolean produciría true porque es una cadena no vacía.

Cómo guardar objetos y arrays

const ajustes = { idioma: "es", tamano: 16 };
try {
  localStorage.setItem("mcp:ajustes", JSON.stringify(ajustes));
  const texto = localStorage.getItem("mcp:ajustes");
  const recuperado = texto === null ? null : JSON.parse(texto);
  console.log(recuperado);
} catch (error) {
  console.error("No se pudieron guardar o leer los ajustes", error);
}

Después de parsear, valida que el objeto tiene las propiedades y tipos esperados. Un usuario o una versión anterior de la aplicación puede haber guardado otra estructura.

Qué no debes guardar aquí

No utilices localStorage como almacén de contraseñas, secretos o datos cuyo acceso debas restringir frente al JavaScript que se ejecuta en el origen. Una vulnerabilidad de inyección puede exponer la información accesible desde scripts.

Tampoco asumas que el contenido es fiable por venir del almacenamiento local: debe tratarse y mostrarse con las mismas precauciones que otros datos.

LocalStorage frente a sessionStorage

SessionStorage se organiza además por sesión de pestaña y normalmente se elimina al terminarla. LocalStorage está pensado para persistencia entre sesiones. Los dos son síncronos: grandes cantidades de datos o escrituras frecuentes pueden perjudicar la interacción.

Preguntas frecuentes

¿Por qué no aparecen los datos en otra URL?

Comprueba el origen: protocolo, dominio y puerto. HTTP y HTTPS no comparten automáticamente el mismo almacenamiento.

¿Caduca automáticamente?

LocalStorage no ofrece una fecha de expiración por clave. Si la necesitas, implementa y comprueba una marca temporal.

Para practicar con eventos y cambios visuales, consulta el DOM en JavaScript.

Referencia técnica: documentación de MDN.