🔒 Día 24 — JSON, consumo de APIs externas, localStorage y sessionStorage

¡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

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!