miércoles, 16 de septiembre de 2020

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);  
     }  
   }  

No hay comentarios:

Publicar un comentario