JavaScript Academy · Lección

Almacenamiento de objetos con JSON

Serialice objetos para almacenarlos y recuperarlos.

Almacenamiento de objetos con JSON es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

El almacenamiento solo contiene cadenas

Web Storage almacena cadenas, por lo que no puede guardar un objeto directamente. Al almacenarlo, se obtiene el texto inútil "[object Object]". La solución es utilizar JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Serialización con JSON.stringify

Convierta un objeto en una cadena JSON con JSON.stringify antes de almacenarlo.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Deserialización con JSON.parse

Al leer, convierta de nuevo la cadena en un objeto con JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Ida y vuelta

El patrón completo es aplicar stringify al guardar y parse al leer. Funciona tanto con objetos como con arrays.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Gestión del caso null

JSON.parse(null) devuelve null (no lanza una excepción), pero analizar datos ausentes aún puede producir resultados inesperados. Proporcione un valor predeterminado alternativo.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Protección frente a la corrupción

Si el JSON almacenado tiene un formato incorrecto, JSON.parse lanza un SyntaxError. Envuélvalo en try/catch para que una entrada defectuosa no bloquee la aplicación.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

Auxiliar reutilizable para guardar

Envuelva el paso de stringify en un auxiliar para no olvidarlo nunca.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

Qué descarta JSON

JSON no puede representar funciones, undefined, objetos Date (se convierten en cadenas), Map ni Set. Téngalo en cuenta: almacene las fechas como cadenas ISO y vuelva a crearlas al leerlas.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Restauración de fechas

Como las fechas se serializan como cadenas, conviértalas de nuevo después del análisis si necesita utilizar los métodos de Date.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Actualización de datos anidados

Para cambiar una parte de un objeto almacenado, léalo, modifique la copia y vuelva a escribirla. El almacenamiento no tiene una API para actualizaciones parciales.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Versionado de las estructuras almacenadas

Las estructuras de datos de una aplicación cambian con el tiempo. Almacenar un campo version permite migrar o descartar datos antiguos cuando evoluciona el formato.

saveJSON("prefs", { version: 2, theme: "dark" });

Comprobación rápida

Almacenamiento de objetos en Web Storage.

Resumen

El almacenamiento contiene cadenas, por lo que debe aplicar JSON.stringify a los objetos antes de guardarlos y JSON.parse al leerlos. Proteja el análisis con try/catch y proporcione valores predeterminados. Recuerde que JSON descarta las funciones y undefined, y convierte las fechas en cadenas. Actualice los datos anidados mediante la secuencia leer-modificar-escribir y considere la posibilidad de versionar las estructuras almacenadas.

Preguntas frecuentes

¿La lección «Almacenamiento de objetos con JSON» es gratis?

Sí — el texto completo de «Almacenamiento de objetos con JSON» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Almacenamiento de objetos con JSON»?

Serialice objetos para almacenarlos y recuperarlos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Almacenamiento de objetos con JSON»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy