Guías Técnicas

Trabajando con JSON y Almacenamiento Local en JavaScript

¿Qué es JSON?

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos, fácil de leer y escribir para humanos, y fácil de analizar y generar para máquinas. Se utiliza comúnmente para enviar y recibir datos en aplicaciones web.

javascript 
{JSON.stringify(data, null, 2)}
  JSON.stringify

Es una función de JavaScript que convierte un objeto en una cadena de texto en formato JSON.

  • Primer parámetro (data): Es el objeto o valor que quieres convertir en una cadena JSON.
  • Segundo parámetro (null): Es el replacer, que permite filtrar o transformar los valores del objeto antes de convertirlo a JSON. Si se establece en null, no se aplica ningún filtro, lo que significa que todos los valores del objeto serán incluidos tal como están.
  • Tercer parámetro (2): Controla el espaciado o indentación en la salida del JSON. Un valor de 2 indica que cada nivel de anidación se indentará con 2 espacios, lo que hace que el JSON sea más legible.

Trabajar con JSON

En JavaScript, puedes trabajar con JSON utilizando dos métodos principales: JSON.stringify() y JSON.parse().

Convertir objetos a JSON

El método JSON.stringify() se utiliza para convertir un objeto de JavaScript en una cadena JSON.

Ejemplo de JSON.stringify()

javascript 
const persona = {
  nombre: "Juan",
  edad: 30,
  ciudad: "Bogotá"
};

const jsonString = JSON.stringify(persona);
console.log(jsonString);  
// {"nombre":"Juan","edad":30,"ciudad":"Bogotá"}

Convertir JSON a objetos

El método JSON.parse() se utiliza para convertir una cadena JSON de vuelta en un objeto de JavaScript.

javascript 
const jsonString = '{"nombre":"Juan","edad":30,"ciudad":"Bogotá"}';
const persona = JSON.parse(jsonString);
console.log(persona.nombre);  // Juan

Almacenamiento Local y SessionStorage

En el navegador, puedes utilizar LocalStorage y SessionStorage para almacenar datos de manera persistente. Ambos son parte de la API Web Storage y permiten almacenar pares clave-valor.

LocalStorage

LocalStorage almacena datos de forma persistente, incluso después de cerrar el navegador. Los datos guardados en LocalStorage pueden ser accedidos en futuras sesiones.

javascript 
// Guardar datos
localStorage.setItem('usuario', JSON.stringify(persona));

// Obtener datos
const usuarioGuardado = JSON.parse(localStorage.getItem('usuario'));
console.log(usuarioGuardado.nombre);  // Juan

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

SessionStorage

SessionStorage almacena datos de forma temporal, y los datos se eliminan cuando se cierra la pestaña o el navegador. Es útil para almacenar información que solo necesitas durante la sesión actual.

javascript 
// Guardar datos
sessionStorage.setItem('tempData', 'Esta información es temporal');

// Obtener datos
const tempData = sessionStorage.getItem('tempData');
console.log(tempData);  // Esta información es temporal

// Eliminar datos
sessionStorage.removeItem('tempData');
  Resumen

  • JSON es un formato de intercambio de datos utilizado para serializar y deserializar datos.
  • JSON.stringify() convierte objetos a cadenas JSON, mientras que JSON.parse() convierte cadenas JSON en objetos.
  • LocalStorage almacena datos de manera persistente, mientras que SessionStorage almacena datos temporalmente durante la sesión del navegador.