HTML5 localStorage y almacenamiento local

HTML5 y la implementacion de LocalStorage

Este articulo esta centrado simplemente a dar una introducción lo menos compleja posible para posibilitar y alentar a los lectores a inciarse en el camino
de HTML5 y sus caracteristicas, que de hecho resuelven inconvenientes y aceleran la programacion en el plano de la implementacion de codigo cliente/servidor.

En mi caso el uso del LocalStorage fue acompañado a JQuery con lo cual me fue de mucha utilidad, presindiendo de las famosas cookies (entre otras técnicas para arrastrar variables entre páginas), las cuales ademas de estar limitadas te generan un trabajo extra que es cuidar la cabezera (de no enviarla antes para poder acceder a estas)
Acabamos de iniciar y vemos una de las ventajas de LocalStorage. Independencia en la carga de la página.



Pero vamos a lo puntual, ¿Qué es LocalStorage?

Basicamente LocalStorage nos permite almacenar valores en variables que serán permanentes para el navegador, aún cerrando este. Es decir que mientras el storage no se limpie, la informacion que podamos almacenar en el navegador,
supongamos que empleamos Mozilla, se mantendrá aún inclusive luego de varios días, sin importar cuantos. Obviamente, como sucede con todas las caracteristicas nuevas que se van "anexando" a los navegadores, dependera del navegador
para saber si lo soporta o no.
En general prácticamente esta soportado por la mayoria:

Web:  IE 8.0+ FIREFOX 3.5+ SAFARI 4.0+ CHROME 4.0+ OPERA10.5+

en Mobiles:  IPHONE 2.0+ ANDROID 2.0+

Con lo cual, es raro encontrar a alguien con un Firefox, o Chrome con una version menor. IExplorer a partir del 8.
Las limitaciones en capacidad del almacenamiento bajo esta modalidad esta aproximadamente rondando los 5 Mb. dependiendo de la implementacion de cada navegador.

En general Localstorge no se envia ni se procesa en la web, sino en el mismo navegador con lo cual la manera para poder "almacenarlo" o procesarlo contra el server
seria a travez de enviarlo por medio de POST o GET o implementando alguna rutina en AJAX.
Localstorage pertenece a la especificacion denominada WebStorage para HTML5 (algunos la llaman DOM Storage) y su forma de almacenamiento es local como comentabamos anteriormente, y se puede definir a traves de un "nombre de variable" o nombre clave y un valor vinculado.

Obviamente para poder acceder a este es necesario trabajar con Javascript, y se recomienda como precaucion y buena medida de programacion evaluar la posibilidad de emplear esta funcion a travez del código:

Chequeo de disponibilidad:

soporte_html5_storage function () {
if(typeof(Storage)!=="undefined")
 {
 // Si! soporte para localStorage y sessionStorage -que veremos luego-
 return true;
 }
else
 {
 // Sorry! Navegador sin soporte!!!
 return false;
 }
}


Almacenando datos:

Una vez que determinamos la posibilidad de emplear localstorage en nuestro proyecto, simplemente lo empleamos como si tratase de una funcion con 2 parametros:

localStorage.setItem("fecha","26-09-2012");
localStorage.setItem("listado","Fernando, Alvaro, Alberto, Julian");

Tan simple como esto.

Leyendo datos:
Para poder leer la info, tan solo se accede a traves del nombre de la variable o nombre del storage:

localStorage.getItem("listado");

de esta manera podemos ver el dato referenciado, pero existe la manera de realizar el volcado de todos los datos, lo cual nos vendría muy bien si lo
empleamos para depurar el codigo, empleando console.log, por ejemplo con Chrome:

for (i=0; i<=localStorage.length-1; i++){
var = localStorage.key(i);
//Obtenemos el nombre de la variable segun la posicion de la lista de storage
console.log(localStorage.getItem(var));
//Volcamos cada una de las variables almacenadas en el storage.
}


Borrado y eliminacion del storage:

El borrado no deja de ser una tarea simple como las anteriores, con lo cual para claves o variables individuales hacemos:

localStorage.removeItem("fecha");

O directamente para eliminar todas las variables asignadas (purgar todo) y vaciar el LocalStore:

localStorage.clear();

Alternativas y mas alternativas:

Bueno al decir verdad esta no es la unica manera de acceder (de seguro existen varias), pero no queria dejarles abierta la puerta y que evaluen que existen alternativas para el acceso al LocalStorage podria ser a travez del DOM, un ejemplo mas clásico:

localStorage.listado="Facundo, Leonel, Alvaro, Javier";
      //Otra manera de definir el localstorage.
document.getElementById("result").innerHTML="Listado: "+ localStorage.listado;
//Volcamos el resultado en el elemento con "id" result


Algo mas, sessionStorage:

Existe la posibilidad de crear una sessionStorage (un objeto que solo permanece en la sesion, al cerrar se perderian los datos) y el funcionamiento es
exactamente igual que el objeto LocalStorage.

En la proxima continuaré con WebSQL para ir abarcando las características avanzadas.

Contactate:
  @designsitioweb

Condensado de DiveIntoHtml5  y W3Schools