HTML5 Local Storage

html5 local storageHTML5 es uno de los temas mas populares en el desarrollo web. Poco a poco empieza a ganar el terreno en los proyectos reales en la web. Local Storage es una de las novedades mas esperadas del nuevo estándar. Se espera que en un futuro cercano esta tecnología reemplazara a los cookies, porque les lleva ventaja prácticamente en todo.

Local Storage (almacenamiento local) es una base de datos de tipo key — value (clave — valor). Los datos se almacenan en lado de cliente.

Las principales ventajas antes de los cookies:

  • El tamaño del almacenamiento es mas grande (se limita en los ajustes de navegador)
  • Alto rendimiento (debido a que los datos se almacenan en el HDD del cliente)
  • Tiempo de vida illimitado
  • No se envía al servidor sin necesidad

Debido a su novedad, la tecnología Local Storage solo esta implementada en los navegadores recientes:

  • IE 8.0+
  • Firefox 3.5+
  • Safari 4.0+
  • Chrome 4.0+
  • Opera 10.5+
  • iPhone 2.0+
  • Android 2.0+

Como usarlo

Para empezar vamos a comprobar si el navegador soporta Local Storage:

function isLocalStorageAvailable() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

Este trozo de código comprueba si el objeto localStorage esta disponible.

Una vez que estamos seguros que el navegador soporta Local Storage, vamos a probar de almacenar algunos datos:

localStorage.setItem('foo', 'bar');

Para sacar los datos de Local Storage usemos este código:

var foo = localStorage.getItem('foo');
alert(foo); //bar

Para eliminar los datos del almacén:

localStorage.removeItem('foo'); //elimina el elemento foo
localStorage.clear(); //elimina todos los elementos

Por ultimo, tenemos que saber como enfrentarse a la situación de exceso del tamaño máximo del almacén permitido:

try {
    localStorage.setItem('foo', 'bar');
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('el almacén local excede el tamaño máximo permitido');
    }
}


Como podéis ver el uso de Local Storage es trivial. ¿Por que no probarlo?

Comentarios (2)

RSS Collapse / Expand
+
0
Por fin. Ya pensaba que no habrá mas entradas.

¿Hasta cuantos megas se puede almacenar de este modo?
avatar

bishop3000

  • 02 Septiembre 2011, 15:22
+
+1
Depende del navegador. Normalmente son 5 Mb.
avatar

sim0nsays

  • 02 Septiembre 2011, 23:00

Solo los usuarios registrados y autorizados pueden hacer comentarios.