Uso del LocalStorage, utilizando HTML5, CSS3, JQuery e Ionic.

localstorage1

 

La llegada de html5 trajo consigo muchas novedades interesantes y muy útiles, entre las cuales se encuentra localstorage o como seria su traducción en español, almacenamiento local. Bueno como ya se pudo analizar que con el solo nombre de la API, es una forma de almacenar datos de manera remota, pero al leer esto, seguro surgen preguntas como, si ya existen las cookies para almacenar, para que usar esa. Bueno a continuación, observaremos las ventajas de una frente a la otra.

Puedes descargar el código fuente del ejemplo de este tutorial acá.

 

Diferencias entre Cookies y LocalStorage.

 

CookiesLocalStorage
  • Espacio limitado: Una cookie sólo puede ocupar 4kb de espacio.Es por eso que las cookies suelen utilizarse sólo para almacenar un hash o un identificador que será utilizado por el servidor para identificar la visita.
  • Cada vez que se realiza una petición al servidor, toda la información que está almacenada en las cookies es enviada y también es recibida nuevamente con la respuesta del servidor. O sea, en los intercambios de información entre el navegador web y el servidor siempre van pegadas las cookies.
  • Las cookies tienen una caducidad.
  • Espacio menos limitado: localStorage puede ocupar entre 5 y 10MB dependiendo del navegador web. Con 5 o 10 megas ya podemos tener algo más de información
  • La información almacenada con localStorage no es enviada al servidor en cada petición.
  • No existe una caducidad para localStorage, la información quedará almacenada hasta que se elimine expresamente. Aunque se cierre el navegador.

 

Como guardar, consultar y eliminar datos almacenados con LocalStorage.

 

– Guardar

Para utilizar el proceso de guardar un dato sea nombres, numeros telefonicos, correos, fechas o cualquier otro, recordando que solo se puede guardar string, no se pueden guardar vectores, ni matrices, ni booleans, ni floats, solo strings. Entonces para que guardemos datos en el almacenamiento local pongamos el siguiente ejemplo.

 

Tenemos un input, tipo texto, el cual pensamos escribir un nombre, le asignamos un identificador al input llamado nombretxt, entonces procedemos a capturar lo escrito en el campo de texto y guardarlo en una variable para luego guardarlo en el localstorage.

  1. var nom = document.getElementById(“nombretxt”).value;
  2.  localStorage.setItem(“Nombre”,nom);

De esta manera capturamos el dato y lo guardamos en el localstorage.

 

-Consultar

Ahora para consultar solo debemos llamar la variable que le dimos al guardar el dato, en este caso se le asigno la vaiable Nombre, y el proceso se realiza de la siguiente manera.

  1. var nombre = localStorage.getItem(“Nombre”);
  2. alert(nombre)

Mediante este proceso consultamos y mostramos mediante un alert los datos, aclarando que podemos mostrar los datos donde nosotros deseemos, sea un div, o donde queramos.

 

-Eliminar

Si deseamos eliminar los datos guardados solo debemos hacer lo siguiente.

  1. localStorage.removeItem(“Nombre”);

Y de esta manera ya hemos eliminado los datos que deseemos.

 

 Ejemplo

 

HTML

localStorage

 

 

 

 

 

 

 

 

 

 

 

 

CSS

 

JavaScript/Jquery

 

Web

localweb-1

 

Tablet

localtablet-2

 

 

Movil

localmovil-2

 

 

Enlace de descarga: LocalStorage

 

Publicado por

Pedro Pimienta

Soy de Colombia, tengo 25 años, estudiante de ingeniería de sistemas, escritor y buen lector, soy buen oyente y capaz de encontrar la solución a cualquier problema que se presente.

Share this article

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz