LocalStorage

Hoy aprenderemos a como utilizar el LocalStorage de HTML y JavaScript para usarlo en nuestras paginas web.

¿Qué es el LocalStorage?

Con el LocalStorage podemos guardar información en nuestro navegador web a modo de sesión y que esa información persista y esté disponible durante la navegación entre las diferentes páginas de nuestro sitio web.

El LocalStorage suele usarse mucho en aplicaciones web desarrolladas completamente con JavaScript,  puede aplicarse a cualquier web en la cual necesitemos compartir datos entre secciones.

Veamos cómo usar el LocalStorage en JavaScript.

Guardar datos en el navegador

Para almacenar datos y guardar nuevos elementos o indices en el LocalStorage usaremos la siguiente instrucción:

// Guardar
localStorage.setItem("elemento", "ListadeElementos");

De esta manera damos de alta un nuevo elemento.

Recuperar datos

Para conseguir los datos que tenemos guardados en un indice de nuestro almacenamiento local del navegador usaremos:

// Conseguir elemento
localStorage.getItem("elemento");

Esto nos devolverá el valor que hemos guardado anteriormente.

Guardar objetos en el LocalStorage

Para guardar un objeto primero debemos convertirlo en un string json ya que el localstorage no permite guardar objetos de JavaSciprt como tal.

Tendríamos que hacer algo así:

localStorage.setItem("usuario", JSON.stringify(mi_objeto));

Guardamos el elemento usuario cuyo valor es un objeto convertido a string.

Sacar objetos del LocalStorage

Para recuperar un objeto primero debemos convertirlo en un objeto de JavaScript JSON en lugar del string JSON que se encuentra guardado por defecto.

Haríamos esto:

JSON.parse(localStorage.getItem("usuario"));

Recordemos que:
JSON.parse() es para convertir algo a un objeto JSON usable por JavaScript.
JSON.stringify() es para crear un JSON string de un objeto o un array.

Borrar o vaciar el LocalStorage

Para eliminar un elemento del LocalStorage usaremos la siguiente instrucción:

localStorage.removeItem("usuario");

Siendo"usuario" el identificador del elemento.

Para vaciar por completo el LocalStorage usaremos la siguiente instrucción:
localStorage.clear();

See the Pen
localstorage
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

Desarrollo con la plataforma de desarrollo Firebase

¿Qué es Plataforma de desarrollo Firebase?

Firebase es un conjunto de herramientas que permiten desarrollos más ágiles quitando al dearrollador la preocupación de diseñar e implementar un base de datos, diseñar e implementar consultas a esa base de datos, implementar autenticación y autorización, implementar el código de manejo de errores, el trabajo offline, desempeño, esacalabilidad, entre muchas otras cosas.

También tiene el servicio Firebase cloud Messaging (FCM) que permite el envío de notificaciones para aplicaciones Android, iOS y web.

Tradicional App Development - Desarrollo Tradicoinal de Apps Plataforma de desarrollo Firebase

Tradicional App Development – Desarrollo Tradicoinal de Apps Plataforma de desarrollo Firebase

El modelo de desarrollo tradicional de Apps es así:

Pero utilizando el servicio de Firebase, el esquema cambia a:

Firebase app development - Desarrollo de apps con Plataforma de desarrollo Firebase

Firebase app development – Desarrollo de apps con Plataforma de desarrollo Firebase

Este servicio provee el manejo de Autenticación y Autorización, Base de datos, Almacenamiento además de proveer manejo de Notificaciones.

Dentro del evento Google I/O 2016 se presentó un ejercicio en vivo, dónde se desarrollo una aplicación de chat en tres tecnologias diferentes: Android, iOS, Web utilizando el servicio Firebase.

Si quieres saber más acerca del conjunto de servicios de Firebase, ingresa al sitio oficial: https://firebase.google.com/

Saludos!