Tema 22 · Asincronía y APIs

Persistencia con localStorage y sessionStorage

Aprende a guardar preferencias de usuario, carritos de compra y sesiones en el navegador sin base de datos utilizando la API de Web Storage (localStorage y sessionStorage).

Peticiones con async/await y Fetch API Manejo de Errores con try...catch

La API de Web Storage

La API de Web Storage permite almacenar pares de clave-valor directamente en el navegador del cliente con una capacidad aproximada de 5 MB a 10 MB (mucho mayor y más segura que las cookies tradicionales).

Mecanismo Persistencia en el Tiempo Ámbito
localStorage Permanente (no se borra al cerrar el navegador ni apagar la computadora). Compartido entre todas las pestañas del mismo dominio.
sessionStorage Temporal (se elimina automáticamente al cerrar la pestaña actual). Aislado exclusivamente a la pestaña que lo creó.

Métodos Fundamentales de Storage

// 1. Guardar un valor (siempre como string)
localStorage.setItem("tema_interfaz", "oscuro");

// 2. Leer un valor
const tema = localStorage.getItem("tema_interfaz");
console.log(tema); // "oscuro"

// 3. Eliminar una clave específica
localStorage.removeItem("tema_interfaz");

// 4. Vaciar todo el almacenamiento del dominio
localStorage.clear();

Guardar Objetos y Arrays con JSON

Como localStorage solo almacena texto, los objetos deben ser serializados con JSON.stringify() antes de guardarlos, y deserializados con JSON.parse() al leerlos: 

const preferencias = { volumen: 80, notificaciones: true };

// Guardar objeto convertido a texto
localStorage.setItem("ajustes", JSON.stringify(preferencias));

// Recuperar y parsear a objeto JavaScript
const guardados = JSON.parse(localStorage.getItem("ajustes") || "{}");
console.log(guardados.volumen); // 80

⚡ Libreta de Notas Persistente en el Navegador

Escribe una nota, guárdala y recarga la página: la información permanecerá intacta gracias a localStorage:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Persistencia con localStorage</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-storage { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 0.95rem; margin-bottom: 12px; }
    .botonera { display: flex; gap: 8px; margin-bottom: 12px; }
    button { padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
    .btn-guardar { background: #0284c7; color: white; }
    .btn-limpiar { background: #ef4444; color: white; }
    .btn-recargar { background: #64748b; color: white; }
    .alerta { padding: 10px 12px; border-radius: 6px; font-size: 0.85rem; background: #f1f5f9; border-left: 4px solid #0284c7; }
  </style>
</head>
<body>

  <div class="card-storage">
    <h3 style="margin-top: 0; color: #0f172a;">Libreta de Notas (localStorage)</h3>

    <textarea id="cuaderno-notas" rows="4" placeholder="Escribe algo aquí... Se guardará en tu navegador aunque recargues la página."></textarea>

    <div class="botonera">
      <button class="btn-guardar" onclick="guardarNota()">Guardar en Storage</button>
      <button class="btn-limpiar" onclick="borrarStorage()">Borrar Storage</button>
      <button class="btn-recargar" onclick="location.reload()">Simular Recarga</button>
    </div>

    <div class="alerta" id="mensaje-estado">Comprobando datos almacenados...</div>
  </div>

  <script>
    const CLAVE_STORAGE = 'kilopolis_nota_personal';
    const campo = document.getElementById('cuaderno-notas');
    const estado = document.getElementById('mensaje-estado');

    // Al cargar la página, recuperar nota existente
    function cargarNota() {
      const notaGuardada = localStorage.getItem(CLAVE_STORAGE);

      if (notaGuardada) {
        campo.value = notaGuardada;
        estado.textContent = "✓ Nota restaurada automáticamente desde localStorage.";
        estado.style.borderColor = "#22c55e";
      } else {
        estado.textContent = "No hay notas guardadas actualmente en localStorage.";
        estado.style.borderColor = "#94a3b8";
      }
    }

    function guardarNota() {
      const texto = campo.value.trim();
      localStorage.setItem(CLAVE_STORAGE, texto);
      estado.textContent = `✓ Guardado con éxito a las ${new Date().toLocaleTimeString()}.`;
      estado.style.borderColor = "#0284c7";
    }

    function borrarStorage() {
      localStorage.removeItem(CLAVE_STORAGE);
      campo.value = "";
      estado.textContent = "Nota eliminada de localStorage.";
      estado.style.borderColor = "#ef4444";
    }

    cargarNota();
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.