Json y Storage Copy

 Storage y Json 

El objeto Storage (API de almacenamiento web) nos permite almacenar datos de manera  local en el navegador y sin necesidad de realizar alguna conexión a una base de datos. 

localStorage y sessionStorage son propiedades que acceden al objeto Storage y tienen la  función de almacenar datos de manera local, la diferencia entre éstas dos es que  localStorage almacena la información de forma indefinida o hasta que se decida limpiar  los datos del navegador y sessionStorage almacena información mientras la pestaña  donde se esté utilizando siga abierta, una vez cerrada, la información se elimina. 

Guardar datos en Storage (setItem) 

Existen dos formas de guardar datos en Storage, que son las siguientes: 

localStorage 

// Opción 1 -> localStorage.setItem(name, content) 

// Opción 2 ->localStorage.name = content 

// name = nombre del elemento 

// content = Contenido del elemento 

localStorage.setItem(‘Nombre’, ‘Miguel Antonio’) 

localStorage.Apellido = ‘Márquez Montoya’

sessionStorage 

// Opción 1 -> sessionStorage.setItem(name, content) 

// Opción 2 ->sessionStorage.name = content 

// name = nombre del elemento 

// content = Contenido del elemento 

sessionStorage.setItem(‘Nombre’, ‘Miguel Antonio’) 

sessionStorage.Apellido = ‘Márquez Montoya’ 

Recuperar datos de Storage (getItem) 

Al igual que para agregar información, para recuperarla tenemos dos maneras de hacerlo 

localStorage 

// Opción 1 -> localStorage.getItem(name, content) 

// Opción 2 -> localStorage.name 

// Obtenemos los datos y los almacenamos en variables 

let firstName = localStorage.getItem(‘Nombre’), 

lastName = localStorage.Apellido 

console.log(`Hola, mi nombre es ${firstName} ${lastName}`) 

// Imprime: Hola, mi nombre es Miguel Antonio Márquez Montoya

sessionStorage 

// Opción 1 -> sessionStorage.getItem(name, content) // Opción 2 -> sessionStorage.name 

// Obtenemos los datos y los almacenamos en variables let firstName = sessionStorage.getItem(‘Nombre’), 

lastName = sessionStorage.Apellido 

console.log(`Hola, mi nombre es ${firstName} ${lastName}`) // Imprime: Hola, mi nombre es Miguel Antonio Márquez Montoya 

Eliminar datos de Storage (removeItem) 

Para eliminar un elemento dentro de Storage haremos lo siguiente: 

localStorage 

// localStorage.removeItem(name) 

localStorage.removeItem(Apellido) 

sessionStorage 

// sessionStorage.removeItem(name) 

sessionStorage.removeItem(Apellido)

Limpiar todo el Storage (clear) 

Ya para finalizar veremos la forma para eliminar todos los datos del Storage y dejarlo  completamente limpio 

localStorage 

localStorage.clear() 

sessionStorage 

sessionStorage.clear()

Introducción a JSON 

JSON, cuyo nombre corresponde a las siglas JavaScript Object Notation o Notación de  Objetos de JavaScript, es un formato ligero de intercambio de datos, que resulta sencillo  de leer y escribir para los programadores y simple de interpretar y generar para las  máquinas. 

JSON es un formato de texto completamente independiente de lenguaje, pero utiliza  convenciones que son ampliamente conocidos por los programadores, entre ellos: 

∙ C 

∙ C++ 

∙ C# 

∙ Java 

∙ JavaScript 

∙ Perl 

∙ Python 

∙ Entre otros 

Dichas propiedades hacen de JSON un formato de intercambio de datos ideal para usar  con API REST o AJAX. A menudo se usa en lugar de XML, debido a su estructura ligera y  compacta. 

Muchos lenguajes de programación proporcionan métodos para analizar una cadena de  texto con este formato en un objeto nativo y viceversa. 

Según la descripción de Stack Overflow, JSON “define seis tipos de valores: nulo, números,  cadenas, booleanos, matrices y objetos”. 

Pese a su nombre, no es necesariamente parte de JavaScript, de hecho, es un estándar  basado en texto plano para el intercambio de datos, por lo que se usa en muchos sistemas  que requieren mostrar o enviar información para ser interpretada por otros sistemas. 

Una de las características de JSON, al ser un formato que es independiente de cualquier  lenguaje de programación, es que los servicios que comparten información por este  método no necesitan hablar el mismo idioma, es decir, el emisor puede ser Java y el  receptor Python, pues cada uno tiene su propia librería para codificar y decodificar  cadenas en este formato.

Podemos concluir entonces en que JSON es un formato común para ‘serializar’ y  ‘deserializar’ objetos en la mayoría de los idiomas. 

Por todas las características que te hemos comentado, JSON se ha adoptado ampliamente  en el mundo de la programación como una alternativa a XML. 

¿Cómo surgió JSON? 

A principios de la década de los 90 surgió el problema de que las máquinas pudieran  entenderse entre sí. Entonces utilizaban diferentes sistemas operativos y sus programas  estaban escritos en diferentes lenguajes de programación. Una de las soluciones fue crear  el estándar XML. 

Sin embargo, XML presentaba problemas sobre todo cuando se trataba de trabajar con  gran volumen de datos, puesto que el procesamiento se volvía lento. Surgieron entonces  intentos para definir formatos que fueran más ligeros y rápidos para el intercambio de  información. Uno de ellos fue JSON, promovido y popularizado a principios de los 2000  por Douglas Crockford, un programador conocido como el ‘gurú’ de JavaScript. 

Desde entonces JSON se caracteriza por reducir el tamaño de los archivos y el volumen de  datos que es necesario transmitir. Por ello fue adquiriendo popularidad hasta convertirse  en un estándar. Esto no significa que XML haya dejado de utilizarse, en la actualidad  ambos se emplean para el intercambio de datos. 

En este punto te preguntarás: ¿Quién está usando JSON actualmente? En primer lugar, su  creador es el arquitecto senior de Yahoo JavaScript, así que ya te imaginarás qué formato  de intercambio de datos utiliza esta plataforma. 

El uso de JSON está creciendo rápidamente en toda la industria, debido a que es una  tecnología útil para los desarrollos. Recientemente Twitter migró de XML a JSON. Google  Web Toolkit también trabaja con este formato.

Características de JSON: 

∙ * JSON es solo un formato de datos. 

∙ * Requiere usar comillas dobles para las cadenas y los nombres de propiedades. Las  comillas simples no son válidas. 

∙ * Una coma o dos puntos mal ubicados pueden producir que un archivo JSON no  funcione. 

∙ * Puede tomar la forma de cualquier tipo de datos que sea válido para ser incluido en  un JSON, no solo arreglos u objetos. Así, por ejemplo, una cadena o un número único  podrían ser objetos JSON válidos. 

∙ * A diferencia del código JavaScript, en el que las propiedades del objeto pueden no  estar entre comillas, en JSON solo las cadenas entre comillas pueden ser utilizadas  como propiedades. 

Ventajas y desventajas de JSON y XML 

Utilizar JSON o XML depende de las circunstancias y de las preferencias que en cada  momento se determinen, pues cada uno tiene sus ventajas y desventajas. Aquí te  mencionamos algunas: 

JSON 

Ventajas: 

∙ Es autodescriptivo y fácil de entender. 

∙ Su sencillez le ha permitido posicionarse como alternativa a XML. ∙ Es más rápido en cualquier navegador. 

∙ Es más fácil de leer que XML. 

∙ Es más ligero (bytes) en las transmisiones. 

∙ Se parsea más rápido. 

∙ Velocidad de procesamiento alta. 

∙ Puede ser entendido de forma nativa por los analizadores de JavaScript. Desventajas: 

∙ Algunos desarrolladores encuentran su escueta notación algo confusa. ∙ No cuenta con una característica que posee XML: extensibilidad. ∙ No soporta grandes cargas, solo datos comunes. 

∙ Para la seguridad requiere de mecanismos externos como expresiones regulares. ∙

XML 

Ventajas: 

∙ Tiene un formato estructurado y fácil de comprender. 

∙ Separa radicalmente la información o el contenido de su presentación o formato. ∙ Está diseñado para ser utilizado en cualquier lenguaje o alfabeto. ∙ Su análisis sintáctico es fácil debido a las estrictas reglas que rigen la composición de  un documento. 

∙ Tiene soporte a cualquier tipo de datos. 

∙ Se pueden definir estructuras complejas y reutilizables. 

Desventajas: 

∙ El formato es sumamente estricto. 

∙ Lleva más tiempo procesarlo. 

∙ Complejidad de analizador (parser). 

∙ Un error en cualquier parte del formato puede hacer que todo el documento sea  inválido.

Sintaxis JSON 

Ya sabes qué es un archivo JSON, ahora debes saber que para crear correctamente un  archivo .json, debes seguir la sintaxis correcta. 

Hay dos elementos centrales en un objeto JSON: claves (Keys) y valores (Values). 

∙ Las Keys deben ser cadenas de caracteres (strings). Como su nombre en  español lo indica, estas contienen una secuencia de caracteres rodeados de  comillas. 

∙ Los Values son un tipo de datos JSON válido. Puede tener la forma de un  arreglo (array), objeto, cadena (string), booleano, número o nulo. 

Un objeto JSON comienza y termina con llaves {}. Puede tener dos o más pares  de claves/valor dentro, con una coma para separarlos. Así mismo, cada key es seguida  por dos puntos para distinguirla del valor. 

Ejemplo: 

{“ciudad“:“Buenos Aires”, “país“:“Argentina”} 

Aquí tenemos dos pares de clave/valor: ciudad y país son las claves; Buenos  Aires y Argentina son los valores.

Tipos de valores 

Como se mencionaba antes, los valores contienen un tipo de datos JSON válido, como: 

Array 

Un array (en español conocido como arreglo o vector) es una colección ordenada de  valores. Está rodeado de corchetes [] y cada valor dentro está separado por una coma. Un valor de un array puede contener objetos JSON, lo que significa que utiliza el  mismo concepto de par clave/valor. Por ejemplo: 

“estudiantes”: [ 

{“primerNombre”:”Matias”, “Apellido”:”Fernandez”}, 

{“primerNombre”:”Juan”, “Apellido”:”Torres”}, 

{“primerNombre”:”Alexis”, “Apellido”:”García”} 

] 

En este caso, la información entre corchetes es un array, que tiene tres objetos. 

Objeto 

Un objeto contiene una clave y un valor. Hay dos puntos después de cada clave y una  coma después de cada valor, que también distingue a cada objeto. Ambos están entre  comillas. 

El objeto, como valor, debe seguir la misma regla que un objeto común.  

Ejemplo: 

“empleados“: {“nombre“:“Tom”, “apellido“:“Jackson”} 

Aquí, empleados es la clave, mientras que todo lo que está dentro de las llaves es el  objeto.

Strings 

Un string (conocido en español como cadena de caracteres) es una secuencia  establecida de cero o más caracteres Unicode. Está encerrado entre dos comillas  dobles. 

Este ejemplo muestra que Tom es un string ya que es un conjunto de caracteres  dentro de una comilla doble. 

“Primer Nombre“:“Guillermo” 

Número 

El número en JSON debe ser un número entero o un punto flotante, como {“Edad“:“30”} 

Booleano 

Puedes usar verdadero o falso como valor, de la siguiente manera: {“Casado“:“false”} 

Nulo 

Es para mostrar que no hay información. 

{“Tipo de sangre“:“null”}

Datos JSON almacenados 

Continuando con esta explicación acerca de qué es JSON, pasemos a hablar de que hay  dos formas de almacenar datos JSON: objeto y vector. El primero se ve así: { 

“nombre“:“Alejandro”, 

“apellido“:“Martínez”, 

“género“:“masculino” 

} 

Las llaves indican que es un objeto JSON. Implica tres pares clave/valor que están  separados por comas. 

En cada par, tienes las claves (nombre, apellido y género) seguidas de dos puntos para  distinguirlos de los valores (Tom, Jackson, masculino). 

Los valores en este ejemplo son strings. Por eso también están entre comillas,  similares a las claves. 

Usando vectores 

Otro método para almacenar datos es un vector (array). Échale un vistazo a éste  ejemplo: 

{ 

“nombre“:“Juan”, 

“apellido“:“Martin”, 

“género“:“Alexis”, 

“hobby“:[“fútbol”, “lectura”, “natación”] 

}

Lo que diferencia esto del método anterior es el cuarto par clave/valor. Hobby es la  clave y hay varios valores (fútbol, lectura, natación) entre corchetes, que representan  un vector. 

Puede ser útil cuando se combina con JSONP para superar el problema entre dominios.  Este proceso funciona utilizando lo que se denomina devoluciones de llamada  (callbacks), que solicitarán un elemento específico del vector sin obtener un error “del  mismo origen” (same-origin). 

Y afortunadamente, un Array también admite bucles, lo que te permite ejecutar  comandos repetidos para buscar múltiples datos, haciendo que el proceso sea más  rápido y efectivo. 

Conclusión 

Como puedes ver, se trata de una herramienta útil para intercambiar datos. Tiene  muchas ventajas: 

∙ Puedes cargar información de forma asíncrona para que tu sitio web responda  mejor y pueda manejar el flujo de datos con mayor facilidad. 

∙ También puedes usarlo para superar problemas de dominio cruzado al  intercambiar datos desde otro sitio. 

∙ Un archivo JSON es más simple y más liviano que un archivo XML.

Cómo usar JSON.parse() y JSON.stringify() 

El objeto JSON, que está disponible en todos los navegadores modernos, tiene dos útiles  métodos para manejar el contenido con formato  

JSON: parse y stringify. JSON.parse() toma una cadena JSON y la transforma en un objeto  de JavaScript JSON.stringify() toma un objeto de JavaScript y lo transforma en una cadena  JSON. 

Ejemplo: 

const myObj = { 

 name: ‘Skip’, 

 age: 2, 

 favoriteFood: ‘Steak’ 

}; 

const myObjStr = JSON.stringify(myObj); 

console.log(myObjStr); 

// “{“name”:”Sammy”,”age”:6,”favoriteFood”:”Tofu”}” 

console.log(JSON.parse(myObjStr)); 

// Object {name:”Sammy”,age:6,favoriteFood:”Tofu”} 

A pesar de que los métodos se utilizan generalmente en objetos, también se pueden usar  en matrices: 

const myArr = [‘bacon’, ‘lettuce’, ‘tomatoes’]; 

const myArrStr = JSON.stringify(myArr); 

console.log(myArrStr); 

// “[“shark”,”fish”,”dolphin”]” 

console.log(JSON.parse(myArrStr)); 

// [“shark”,”fish”,”dolphin”]

JSON.parse() 

JSON.parse() puede tomar una función como segundo argumento que puede transformar  los valores de objeto antes de que se devuelvan. Aquí los valores del objeto se convierten  en mayúsculas en el objeto devuelto del método parse: 

const user = { 

 name: ‘Sammy’, 

 email: ‘Sammy@domain.com’, 

 plan: ‘Pro’ 

}; 

const userStr = JSON.stringify(user); 

JSON.parse(userStr, (key, value) => { 

 if (typeof value === ‘string’) { 

 return value.toUpperCase(); 

 } 

 return value; 

}); 

Nota: Las comas al final no son válidas en JSON, por lo que JSON.parse() genera un error si  la cadena que se pasa a ella tiene comas al final.

JSON.stringify() 

JSON.stringify() puede tomar dos argumentos adicionales: el primero es una  función replacer y el segundo es un valor String o Number que se utiliza como un space en  la cadena que se devuelve. 

La función de reemplazo se puede usar para filtrar los valores, ya que cualquier valor  devuelto como undefined estará fuera de la cadena devuelta: 

const user = { 

 id: 229, 

 name: ‘Sammy’, 

 email: ‘Sammy@domain.com’ 

}; 

function replacer(key, value) { 

 console.log(typeof value); 

 if (key === ’email’) { 

 return undefined; 

 } 

 return value; 

} 

const userStr = JSON.stringify(user, replacer); 

// “{“id”:229,”name”:”Sammy”}” 

Y un ejemplo con un argumento space aprobado: 

const user = { 

 name: ‘Sammy’, 

 email: ‘Sammy@domain.com’, 

 plan: ‘Pro’ 

}; 

const userStr = JSON.stringify(user, null, ‘…’); 

// “{ 

// …”name”: “Sammy”, 

// …”email”: “Sammy@domain.com”, 

// …”plan”: “Pro” 

// }”