¡Vamos allá! Aquí tienes el DÍA 24 completo, siguiendo dando lo mejor si quieres ser un desarrollador senior.

---

Objetivo:
Hoy aprenderás a trabajar con datos estructurados en formato JSON, a consumir APIs externas de forma profesional, y a guardar datos de manera persistente en el navegador usando localStorage y sessionStorage.
Este conocimiento te permitirá crear aplicaciones web modernas que interactúan con servidores y recuerdan datos de los usuarios.

---

📚 Formación Teórica

1. ¿Qué es JSON?

• JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos, fácil de leer y escribir para humanos y máquinas.
• Se utiliza para enviar y recibir datos entre un cliente (navegador) y un servidor.

2. Consumo de APIs externas

• Aprenderás a consumir APIs de terceros utilizando fetch y a procesar las respuestas JSON.
• Diferencias entre métodos GET y POST en peticiones HTTP.

3. Almacenamiento Local y de Sesión

• localStorage: Guarda datos de forma persistente, incluso si el navegador se cierra.
• sessionStorage: Guarda datos solo mientras la pestaña o ventana del navegador está abierta.

---

🎥 Vídeos de hoy

• ✅ Trabajar con JSON y consumir APIs (Desde 6:08:54 hasta 7:44:07)

Instrucciones para el vídeo:

• Asegúrate de entender cómo estructurar, parsear (JSON.parse) y convertir (JSON.stringify) datos JSON.
• Observa cómo usar fetch para enviar y recibir datos en formato JSON.
• Entiende la diferencia entre GET y POST.

---

🧠 Apuntes Técnicos del Día

📌 JSON en JavaScript

// Convertir objeto a JSON
let usuario = { nombre: "Jesús", edad: 34 };
let usuarioJSON = JSON.stringify(usuario);

// Convertir JSON a objeto
let nuevoUsuario = JSON.parse(usuarioJSON);

console.log(nuevoUsuario.nombre); // Jesús

• JSON.stringify(objeto): convierte objeto a texto JSON.
• JSON.parse(textoJSON): convierte texto JSON a objeto.

---

📌 Consumo de APIs externas

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => {
    data.forEach(user => console.log(user.name));
  })
  .catch(error => console.error('Error:', error));

• Utilizamos fetch para hacer solicitudes y trabajar con la respuesta en JSON.

---

📌 Métodos GET y POST

• GET: solicitar información.
• POST: enviar información al servidor.

Ejemplo POST:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'Nuevo Post',
    body: 'Contenido del post',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  }
})
.then(response => response.json())
.then(json => console.log(json));

---

📌 Almacenamiento local y de sesión

// Guardar datos
localStorage.setItem('usuario', 'Jesús');
sessionStorage.setItem('sesionActiva', 'true');

// Recuperar datos
let usuario = localStorage.getItem('usuario');
let sesion = sessionStorage.getItem('sesionActiva');

// Eliminar datos
localStorage.removeItem('usuario');
sessionStorage.removeItem('sesionActiva');

• localStorage guarda datos de forma indefinida.
• sessionStorage borra los datos cuando se cierra la pestaña.

---

🛠️ Tareas prácticas del Día 24

Tarea 1 — Trabajar con JSON:

• Crea un objeto de usuario (nombre, edad, email).
• Convierte el objeto a JSON y guárdalo en localStorage.
• Recupera el JSON, conviértelo de nuevo en objeto y muestra el nombre en consola.

Tarea 2 — Consumo de API externa:

• Usa fetch para consultar https://jsonplaceholder.typicode.com/posts.
• Muestra en consola los títulos de los primeros 10 posts.

Tarea 3 — Simulación de login:

• Crea un pequeño formulario con email y contraseña.
• Al enviar el formulario, guarda el email en sessionStorage.
• Muestra en consola el email guardado.

Entrega:

• Crea un documento PDF donde adjuntes:
  • Código de las manipulaciones con JSON y API.
  • Código del formulario y sessionStorage.
  • Capturas de pantalla mostrando resultados.

---

🚀 Resultado esperado al finalizar el día

• Saber trabajar con datos en formato JSON.
• Consumir APIs externas utilizando fetch.
• Almacenar y recuperar datos en el navegador usando localStorage y sessionStorage.

---

Ya has terminado esta importante sección. ¿Estás listo para seguir con el Día 25, donde rematamos este bloque aprendiendo Destructuring, Spread Operator, y los métodos modernos de Arrays (map, filter, reduce)? 🚀
¡Listo para continuar!