Cómo almacenar datos con HTML5

Casi todas las aplicaciones de escritorio o móviles necesitan almacenar los datos del usuario en algún sitio. Pero, ¿qué pasa con las páginas estáticas? En el pasado, utilizamos las cookies para dicho propósito, pero tienen serias limitaciones. HTML5 nos proporciona mejores herramientas para resolver este problema. La primera es IndexedDB, que es un buen reemplazo de las cookies, y Web Storage, que es una combinación de dos APIs muy simples, que es lo que os mostraré en este artículo.

¿Qué es el Web Storage?

En términos generales, Web Storage (también conocido Dom Storage) se refiere a un conjunto de APIs que proporcionan una forma sencilla de almacenar los datos del lado del cliente en el navegador. Es más seguro y más rápido que las cookies, por no mencionar que es más potente. Los datos se almacenan en el navegador del usuario y no se transfieren a través de la red, como pasa con las cookies. También es posible almacenar una mayor cantidad de datos que las cookies sin afectar al rendimiento de tu sitio web.

Web Storage proporciona dos objetos para el almacenamiento de datos:

  • localStorage: Mediante el uso de este objeto, podemos almacenar datos sin una fecha de caducidad, lo que significa que los datos serán almacenados en el almacenamiento local del usuario para siempre.
  • sessionStorage: Mediante el uso de este objeto, los datos que se almacenen estarán allí hasta que el visitante cierre su navegador (no la pestaña). Un buen ejemplo de esto es la acción de guardar datos temporales como el contenido de un formulario que el usuario está completando, en caso de que se cierre la pestaña o refresque la página accidentalmente.

Primeros pasos

Ahora que sabemos qué es el Web Storage, vamos a ponernos a ello.

localStorage

Es muy sencillo almacenar datos en localStorage, sólo tienes que asignarlos como una propiedad. Leerlos es extremadamente simple, como puedes ver en el siguiente ejemplo:

localStorage.myText = 'This is some text which have been stored with localStorage object';
document.getElementById("text").innerHTML= localStorage.myText;

sessionStorage

Almacenar datos y leerlos con sessionStorage es igual de simple:

sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';
document.getElementById("text").innerHTML= sessionStorage.myText;

Ambos objetos cuentan con los métodos setItem(), getItem() y removeItem()

localStorage.setItem('username','Johnny');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username'); // Johnny is no more!

También puedes iterarlos al igual que un objeto normal, y comprobar su longitud.

console.log(localStorage.length);
for(var i in localStorage){ console.log(localStorage[i]);}

Soporte para navegadores

Como suele pasar con estas características tan impresionantes de HTML5, debes comprobar la lista de navegadores compatibles antes de hacer uso de ellas. Web Storage es soportado por casi todos los navegadores modernos, incluyendo IE8 +. Por desgracia Internet Explorer 7 y las versiones anteriores de Internet Explorer no son compatibles con la API, por lo que tendrás que utilizar uno de las alternativas que mencionamos a continuación, si quieres contar con dicha característica.

Librerías de Javascript para Web Storage

Aquí tienes una sería de librerías de Javascript super chulas que llevan el Web Storage a otro nivel:

basket.js

Un simple script que almacenar en caché los scripts con localStorage.

Kizzy

Una utilidad Javascript para localStorage muy ligera y multiplataforma.

LocalDB.js

Una herramienta que mapea la estructura de las bases de datos en objetos utilizando la API localStorage.

Rockstage.js

Una librería de Javascript para que el uso de localStorage y sessionStorage sea más sencillo.

store.js

score.js es muy útil si quieres que el Web Storage funcione en todos los navegadores.

Fuente: tutorialzine.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP