Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
JSON es el formato de texto que usan la mayoría de las APIs y que localStorage necesita para guardar datos complejos. JSON.stringify convierte un objeto en texto, y JSON.parse hace lo contrario.
Explicación
JSON.stringify y JSON.parse convierten datos entre objeto de JavaScript y texto, en direcciones opuestas:
JSON.stringify(valor)Convierte un objeto o array de JavaScript en un texto (string) con formato JSON, listo para guardar o enviar.
JSON.parse(texto)Convierte un texto con formato JSON de vuelta en un objeto o array de JavaScript real, con sus propiedades accesibles normalmente.
typeofConfirma que el resultado de stringify es un string y el de parse es un objeto, aunque en consola se vean parecidos.
JSONJavaScript Object Notation: el formato de texto que usan la mayoría de las APIs para enviar y recibir datos, y el mismo que localStorage necesita porque solo guarda strings.
Reto rápido
Agrega una propiedad prioridad: "alta" al objeto tarea y confirma que aparece en tareaRecuperada después de convertirlo a texto y de vuelta.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
JSON.stringify y JSON.parse son la pareja perfecta para guardar objetos completos en localStorage: conviertes el objeto a texto antes de guardarlo con setItem, y lo vuelves a convertir a objeto con parse al leerlo con getItem.
Dato extra
fetch ya usa esto internamente: respuesta.json() (de la primera lección de este módulo) básicamente lee el texto de la respuesta y le aplica JSON.parse automáticamente por ti.
Error común
Guardar un objeto directamente en localStorage sin JSON.stringify, como localStorage.setItem("tarea", tarea): como localStorage solo guarda strings, JavaScript convierte el objeto al texto "[object Object]" en vez de sus datos reales, y la información se pierde.
Siguiente paso
Ya sabes pedir datos con fetch, guardarlos en el navegador y convertirlos entre objeto y texto con JSON. En el siguiente módulo vas a juntar todo lo aprendido en un proyecto práctico real.
Ir a la siguiente lección