Lista de la compra usando localStorage en JS

Usando el método localStorage de JavaScript podemos guardar datos en el propio navegador. Esto nos permite guardar los datos que queramos y que al cerrar el navegador o incluso al reiniciar el PC podamos seguir accediendo a los datos sin problema. 

El código en GitHub: https://github.com/magnitopic/edujs/tree/master/ListaCompraJS

Mira el codigo ejecutandose en relp.it: https://listacomprajs.valoro.repl.co/

index.html

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Main HTML</title>  
 </head>  
 <body>  
   <h1>Lista de la compra</h1>  
   <p>Añadir item a la lista</p>  
   <input type="text" id="entrada">  
   <button onclick="anadir()">Añadir</button>  
   <div id="resultado">  
     <ul id="lista-compra"></ul>  
   </div>  
   <script src="script.js"></script>  
 </body>  
 </html>  

script.js

 'use strict'  
 var contador= 0;  
 function anadir(){  
   var x = document.getElementById("entrada").value;  
   if(x.length <= 0){  
   }else{  
     localStorage.setItem(x,x);  
     location.reload();   
   }  
 }  
 var ul = document.getElementById('lista-compra');  
   for(var i in localStorage){  
     if(typeof localStorage[i] =='string'){  
       var li= document.createElement("li");  
       li.append(localStorage[i]);  
       ul.append(li);  
     }  
   }  

Transformaciones JSON con AJAX

Veamos cómo transformar un objeto JSON en una cadena de texto y viceversa utilizando parse y stringify.

Versión 1

Disponemos de un archivo JSON que deseamos consultar cuando el usuario pulse un botón.

Podemos ver este código en el siguiente enlace.

• https://repl.it/@valoro/transformacionesJSON

HTML

 <!DOCTYPE html>  
 <html lang="es">  
   <head>  
    <meta charset="UTF-8">  
    <title>Transformaciones con JSON</title>  
    <script type="text/javascript" src="script.js"></script>  
   </head>  
   <body>  
    <ul>  
     <li>Marca: <strong id="marca"></strong></li>  
     <li>Modelos: <i id="modelo"></i></li>  
    </ul>  
    <p>  
     <input type="button" value="Consultar" onclick="loadJSONdoc()"/>  
    </p>  
    <p id="mio"></p>  
   </body>  
 </html>  

JavaScript

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

 function loadJSONdoc() {  
  var jsonhttp = new XMLHttpRequest();  
  jsonhttp.onreadystatechange = function () {  
   if (jsonhttp.readyState === 4 && jsonhttp.status === 200) {  
    var ObjJSON = JSON.parse(jsonhttp.responseText);  
    var StringifyJSON = JSON.stringify(ObjJSON);  
    document.getElementById("mio").innerHTML="JSON como cadena:<br>" + StringifyJSON;  
    document.getElementById("marca").innerHTML = ObjJSON.empresa;  
    document.getElementById("modelo").innerHTML = ObjJSON.gama.toString();  
   }  
  };  
  jsonhttp.open("GET", "ejemploJSON.json", true);  
  jsonhttp.send();  
 }  

ejemploJSON.json

 {  
  "empresa": "Intel",  
  "gama": ["i3", "i5", "i7", "i9"]  
 }  

Versión 2

En esta ocasión el fichero JSON es un array que contiene dos objetos uno para Intel y otro para AMD. El usuario puede elegir con un desplegable la marca sobre la que desea hacer la consulta.

Algunas referencias útiles en w3schools.

• https://www.w3schools.com/js/js_json_stringify.asp
• https://www.w3schools.com/js/js_json_http.asp
• https://www.w3schools.com/js/js_json_parse.asp

El caso en vivo:

• https://repl.it/@valoro/transformacionesJSON-1

HTML

En este caso hemos añadido el desplegable con tres opciones. La primera de ellas está vacía y oculta para que no se sea por defecto a Intel por defecto.

 <!DOCTYPE html>  
 <html lang="es">  
   <head>  
    <meta charset="UTF-8">  
    <title>Transformaciones con JSON</title>  
    <script type="text/javascript" src="script.js"></script>  
   </head>  
   <body>  
    <ul>  
     <li>Marca: <strong id="marca"></strong></li>  
     <li>Modelos: <i id="modelo"></i></li>  
    </ul>  
    <form>  
     <label for="corporacion">Indique la marca: </label>   
     <select id="myDropdown" name="corporacion">  
      <option hidden disabled selected></option>  
      <option value="intel">Intel</option>   
      <option value="amd">AMD</option>   
     </select>   
     <p>  
      <input type="button" value="Consultar" onclick="loadJSONdoc()"/>  
     </p>  
    </form>  
    <p id="mio"></p>  
   </body>  
 </html>  

JavaScript

Capturamos n que es el valor del desplegable y lo utilizamos para el índice con el que vamos a consultar el array del archivo JSON.

 function loadJSONdoc() {  
  var jsonhttp = new XMLHttpRequest();  
  jsonhttp.onreadystatechange = function () {  
   if (jsonhttp.readyState === 4 && jsonhttp.status === 200) {  
    var ObjJSON = JSON.parse(jsonhttp.responseText);  
    var StringifyJSON = JSON.stringify(ObjJSON);  
    document.getElementById("mio").innerHTML="JSON como cadena:<br>" + StringifyJSON;  
    var n=document.getElementById("myDropdown").selectedIndex;  
    elige(n); //si n=1 se ha elegido Intel, si n=2 AMD  
     function elige(n){  
      document.getElementById("marca").innerHTML = ObjJSON[n-1].empresa;  
      document.getElementById("modelo").innerHTML = ObjJSON[n-1].gama.toString();  
     }  
   }  
  };  
  jsonhttp.open("GET", "ejemploJSON.json", true);  
  jsonhttp.send();  
 }  

ejemploJSON.json

Vemos un corchete [] que contiene dos llaves separadas por una coma {},{}. Este es un objeto JSON válido que se puede verificar en la siguiente página.

• https://jsonformatter.curiousconcept.com

 [   
   {   
    "empresa":"Intel",  
    "gama":[   
      "i3",  
      "i5",  
      "i7",  
      "i9"  
    ]  
   },  
   {   
    "empresa":"AMD",  
    "gama":[   
      "Ryzen3",  
      "Ryzen5",  
      "Ryzen7",  
      "Threadripper"  
    ]  
   }  
 ]  

AJAX sobre un archivo XML

Disponemos de un archivo XML y deseamos obtener parte de la información que contienen y mostrarla en una página cuando el usuario pulse un botón.

Veamos dos formas de conseguirlo. La primera (versión 1) utiliza responseText que mustra todo el texto contenido en el archivo XML. La segunda (vesión 2) se maneja con índices para llegar únicamente a las etiquetas que desamos mostrar en la página.

Versión 1

Podemos ver el funcionamiento del código en el siguiente enlace.

• https://repl.it/@valoro/AJAX-xml

HTML

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>saludar con AJAX y XML</title>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h2>Modificamos parte de la página con AJAX</h2>  
   <div id="myDiv">  
    <h3>Por favor, ¡salúdame!</h3>  
    <button type="button" onclick="loadXMLDoc()">Dale</button>  
   </div>  
  </body>  
 </html>  

JavaScript

El condicional if se utiliza para evitar errores, ya que si se cumplen las dos condiciones que se establecen quiere decir que la consulta arroja un valor que existe y no da error.

Aquí this equivale a xmlhttp, se puede sustituir

 function loadXMLDoc() {  
  var xmlhttp=new XMLHttpRequest();  
  xmlhttp.onreadystatechange=function() {    
   if (this.readyState == 4 && this.status == 200){  
    document.getElementById("myDiv").innerHTML=this.responseText;  
   }  
  };  
  xmlhttp.open("GET", "ejemploXML.xml",true);  
  xmlhttp.send();  
 }  

ejemploXML.xml

Conseguimos volcar todo el contenido del archivo XML e incluso conseguimos que aparezca en cursiva (italic).

Con este método (versión 1) volcamos el contenido completo del archivo XML por lo que podemos cambiar las etiquetas y esto no alterará el resultado. En lugar de usar la etiqueta <saludo> podríamos haber usadola etiqueta <pepito> y funcionaría igualmente.

 <?xml version="1.0" encoding="UTF-8"?>  
 <saludo>  
  <i>  
    Hola holita  
  </i>  
 </saludo>  

Variante propuesta

Pruebe a cambiar el archivo XML por el siguiente y ver que al pulsar el botón el usuario logrará volcar el contenido completo del fichero XML.

 <?xml version="1.0" encoding="UTF-8"?>  
 <saludo>  
  <i>Hola holita</i>  
  <p><strong>adios</strong></p>  
 </saludo>  

Versión 2

En esta ocasión vamos a ser más sutiles y no volcaremos el contenido completo del archivo XML sino que iremos buscando la información que nos interese, 'bucenado' entre la estructura de etiquetas y usando índices.

Es interesante ver las páginas siguientes de w3schools.

• https://www.w3schools.com/xml/dom_nodes_get.asp
• https://www.w3schools.com/jsref/prop_node_nodevalue.asp
• https://www.w3schools.com/xml/prop_document_childnodes.asp

Pese a su nombre, XMLHttpRequest puede ser usado para recibir no solo XML.

En algunos navegadores podemos sustituir .childNodes[0].nodeValue por .textContent pero es menos universal.

Podemos ver el funcionamiento del código en el siguiente enlace.

• https://repl.it/@valoro/AJAX-xml-1

HTML

Es el mismo que el de la versión 1.

JavaScript

Ahora no cargamos el contenido completo del archivo XML sino únicamente lo que nos interesa. Para ello empleamos índices y buceamos por la estructura de etiquetas.

 function loadXMLDoc() {  
  var xmlhttp=new XMLHttpRequest();  
  xmlhttp.onreadystatechange=function() {  
   if (this.readyState == 4 && this.status == 200){  
    var respuesta= this.responseXML.getElementsByTagName("saludo")[3].childNodes[0].nodeValue;  
    respuesta="<i>"+respuesta+"</i>"; //cursiva (italic)       
    document.getElementById("myDiv").innerHTML=respuesta;  
   }  
  };  
  xmlhttp.open("GET", "ejemploXML.xml",true);  
  xmlhttp.send();  
 }  

ejemploXML.xml

El índice comienza a contar por cero. Esto supone que el saludo 'Bye bye' tenga índice 3.

 <?xml version="1.0" encoding="UTF-8"?>  
 <mensajes>   
  <saludo>   
   Buenos días  
  </saludo>   
  <saludo>   
   Good morning  
  </saludo>   
  <saludo>   
   Hola holita  
  </saludo>   
  <saludo>   
   Bye bye  
  </saludo>   
 </mensajes>  

AJAX sobre un archivo JSON

Disponemos de un archivo JSON muy sencillo:
{"name": "Fer", "country": "Spain"}

El objetivo es conseguir que la información del archivo JSON se mustren en la página web después de que el usuario pulse sobre un botón.

Versión 1

El ejemplo puede verse funcionando en el sigueinte enlace.

• https://repl.it/@valoro/AJAXJSON

HTML

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Petición AJAX a un JSON</title>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1>Formulario</h1>  
   <form>  
    <p>  
     <label for="misDatos">Datos: </label>  
     <input id="mitexto" type="text" name="misDatos"   
     placeholder="Pulse el botón para ver la información" size="33" disabled>  
    <br>  
    <p>  
     <button type="button" onclick="loadJSONdoc()">Obtener</button>  
    </p>  
   </form>  
  </body>  
 </html>  

JavaScript

 function loadJSONdoc(){  
  var req;  
  if (window.XMLHttpRequest){ //para IE7+, Firefox, Chrome, Opera, Safari  
   req=new XMLHttpRequest();  
  }else{ //para IE6, IE5  
   req=new ActiveXObject("Microsoft.XMLHTTP");  
  }  
  req.onreadystatechange = function() {  
   if (req.readyState === 4 && req.status === 200) {  
    var mijson = JSON.parse(req.responseText);  
    var respuesta=mijson.name+" es de "+mijson.country;  
    document.getElementById("mitexto").value = respuesta;  
   }  
  };  
  req.open("GET", "ejemploJSON.json", true);  
  req.send()  
 }  

ejemploJSON.json

 {  
  "name": "Fer",  
  "country": "Spain"  
 }  

Versión 2

Ahora el archivo JSON es un poco más complejo y nos veremos obligados a manejar índices poniendo mijson.cars[1].

El ejemplo puede verse funcionando en el sigueinte enlace.

• https://repl.it/@valoro/AJAXJSON2

HTML

No ha cambiado.

JavaScript

 function loadJSONdoc(){  
  var req=new XMLHttpRequest();  
  req.onreadystatechange = function() {  
   if (req.readyState === 4 && req.status === 200) {  
    var mijson = JSON.parse(req.responseText);  
    var respuesta=mijson.name+" tiene "+mijson.cars[1];  
    document.getElementById("mitexto").value = respuesta;  
   }  
  };  
  req.open("GET", "ejemploJSON.json", true);  
  req.send()  
 }  

ejemploJSON.json

 {   
 "name":"John",   
 "age":30,   
 "cars":[ "Ford", "BMW", "Fiat", "WV" ]   
 }  

Versión 3

En esta ocasión el fichero JSON es aún más complejo y necesitaremos bucear un poco más usándo índices y entrando en arrays. Así, mijson.cars[2].models[1].

HTML

No ha cambiado.

JavaScript

 function loadJSONdoc(){  
  var req;  
  var req=new XMLHttpRequest();  
  req.onreadystatechange = function() {  
   if (req.readyState === 4 && req.status === 200) {  
    var mijson = JSON.parse(req.responseText);  
    var respuesta=mijson.name+" tiene "+mijson.cars[2].models[1];  
    document.getElementById("mitexto").value = respuesta;  
   }  
  };  
  req.open("GET", "ejemploJSON.json", true);  
  req.send()  
 }  

ejemploJSON.json

 {  
 "name":"John",  
 "age":30,  
 "cars": [  
  { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },  
  { "name":"BMW", "models":[ "320", "X3", "X5" ] },  
  { "name":"Fiat", "models":[ "500", "Panda" ] }  
 ]  
 }  

AJAX actua sin recargar la página

script.jsLa tecnología AJAX (Asynchronous JavaScript And XML) tiene grandes ventajas frente a la forma anterior de trabajar con páginas web donde para responder a una actuación del usuario o evento se debía racargar la página por completo. Con AJAX podemos modificar la página actuando en segundo plano, haciendo más rápida la actuación y requiriendo menos datos ya que se modifica únicamente aquellas partes o datos de la página que cambian.

Veamos un ejemplo inspidrado en w3schooles.

• https://www.w3schools.com/xml/ajax_intro.asp

Nuestro ejemplo está activo en la página:

• https://repl.it/@valoro/ajaxluna

index.html

Hemos puesto la llamada al archivo script.js en el head. Se podría haber puesto en el body, al final, pero no ha sido necesario.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>ir a la Luna</title>  
   <script src="script.js"></script>  
  </head>  
  <body>  
   <div id="demo">  
    <h1>Ir a la Luna es un sueño</h1>  
    <button type="button" onclick="loadDoc()">Inténtalo</button>  
   </div>  
  </body>  
 </html>  

script.js

 function loadDoc() {  
   var xhttp = new XMLHttpRequest();  
   xhttp.onreadystatechange = function() {  
    if (this.readyState == 4 && this.status == 200) {  
     document.getElementById("demo").innerHTML =  
     this.responseText;  
    }  
   };  
   xhttp.open("GET", "ajax_info.txt", true);  
   xhttp.send();  
  }  

ajax_info.txt

 <h1>El sueño se hizo realidad</h1>  
 <p>El hombre pisó la Luna en julio de <strong>1969</strong>.</p>  
 <p>Armstrong fue el primer ser humano que pisó la superficie del satélite terrestre <br>  
 el 21 de julio de 1969 a las 2:56 [UTC] al sur del Mar de la Tranquilidad <br>  
 (Mare Tranquillitatis), seis horas y media después de haber alunizado.</p>