JSON, localStorage y tu primer fetch

Serializa tus datos como JSON, persístelos en el navegador con localStorage y recupera datos remotos con fetch.

10 min · 3 preguntas

JSON es el formato de intercambio universal de la web: es texto cuya sintaxis se parece a los objetos de JavaScript (claves entre comillas dobles, sin funciones). Dos métodos son todo lo que necesitas: JSON.stringify convierte un valor de JavaScript en una cadena, JSON.parse hace el camino inverso.

const task = { title: "Review the lesson", done: false };

const json = JSON.stringify(task);
console.log(json);
// {"title":"Review the lesson","done":false}

const parsed = JSON.parse(json);
console.log(parsed.done); // false

localStorage conserva los datos en el navegador, incluso después de cerrar la pestaña. Es perfecto para un tema elegido, un borrador o una lista de tareas. Como solo almacena texto, JSON actúa de puente: serializa antes de setItem, deserializa después de getItem.

const tasks = [
  { title: "Buy bread", done: false },
  { title: "Review the lesson", done: true }
];

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

const raw = localStorage.getItem("tasks");
const saved = raw ? JSON.parse(raw) : [];
console.log(saved.length); // 2

El último bloque de construcción: obtener datos de un servidor. fetch envía una petición HTTP y devuelve una promesa. Con async/await, el código se lee de arriba abajo: esperas la respuesta, compruebas que es válida y luego esperas la decodificación del JSON, que también es asíncrona.

async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué hace JSON.stringify?
   • Convierte una cadena JSON en un objeto de JavaScript
   • Convierte un valor de JavaScript en una cadena JSON
   • Valida la sintaxis de un archivo JSON
2. ¿Qué devuelve localStorage.getItem para una clave que no existe?
   • Una cadena vacía
   • undefined
   • null
   • Se lanza un error
3. ¿Por qué escribir await response.json() en lugar de simplemente response.json()?
   • Porque response.json() devuelve una promesa
   • Para convertir la respuesta en una cadena
   • Para reintentar la petición si falló