sábado, 31 de agosto de 2019

JavaScript localStorage (1/3)

Esta entrada pertenece a una serie.

El objeto Storage de la API de almacenamiento web proporciona acceso al almacenamiento de sesión o al almacenamiento local para un dominio particular. Esto le permite leer, agregar, modificar y eliminar elementos de datos almacenados.

La propiedad window.localStorage permite guardar pares clave-valor en un navegador web. Almacena los datos sin fecha de vencimiento.

Puede ver un ejemplo funcionando en w3schools.
Basándonos en las ideas del caso anterior vamos a crear un juego con dos botones que mide el intervalo de tiempo que transcurre entre pulsar el primer botón y pulsar el segundo botón.


HTML + JavaScript

 <!DOCTYPE html>  
 <html>  
 <head><meta charset="utf-8"></head>  
 <body>  
 <h1>Mide tu velocidad</h1>  
 <p>Pulsa los dos botones con el menor lapso de tiempo que puedas.</p>  
 <p>Te mostraré los milisegundos que has tardado entre ambas pulsaciones.</p>  
 <button onclick="inicio()">Inicio</button>  
 <button onclick="final()">Final</button>  
 <h3 id="resultado"></h3>  
 <script>  
   var tomahora1=0;  
   function inicio() {  
     localStorage.setItem("mytime", Date.now());  
     tomahora1=localStorage.getItem("mytime");  
     return tomahora1;  
   }  
   function final() {  
     localStorage.setItem("mytime", Date.now());  
     tomahora2=localStorage.getItem("mytime");  
     let intervalo=tomahora2-tomahora1;  
     document.getElementById("resultado").innerHTML = intervalo;  
   }  
 </script>  
 </body>  
 </html>  

La línea siguiente
  • document.getElementById("resultado").innerHTML = intervalo;
se puede intercambiar perfectamente por esta otra:
  • document.querySelector("#resultado").innerHTML = intervalo;

Dejamos enlaces a dos emuladores de código.
El record que hemos llegado a ver

No hay comentarios:

Publicar un comentario