contenido 25 de mayo de 2014 a las 07.11
   Imprimir artículo
elWebmaster.com

Almacenamiento web en HTML5


html5logowideUna de las razones por las que ciertos tecnócratas favorecen a las aplicaciones nativas es por su capacidad para almacenar datos localmente en el cliente. HTML5 hizo un gran avance al permitir que las aplicaciones web puedan almacenar datos en el navegador.

Aunque las cookies están disponibles para almacenar datos en los navegadores, hay ciertas desventajas en ello, que fueron abordadas con la invención de almacenamiento web en HTML5.

Desventajas de usar cookies

  • El límite de almacenamiento de cookies en los navegadores web se limita a alrededor de 4 KB.
  • Las cookies se envían con cada petición HTTP, retrasando así el rendimiento de las aplicaciones web.

¿Qué es el almacenamiento web en HTML5?

Es una base de datos simple del lado del cliente que permite a los usuarios guardar los datos en forma de pares clave y valor.

Tiene una API bastante simple para recuperar y escribir datos en el almacenamiento local. Es capaz de almacenar hasta 10 MB de datos por dominio. A diferencia de las cookies, los datos almacenados no se incluyen con cada solicitud HTTP.

Versiones de IE7 y anteriores no admiten almacenamiento Web. Todos los otros navegadores como Chrome, Opera, Firefox, Safari e IE8 + soporta el almacenamiento Web.

Tipos de almacenamiento Web

Almacenamiento local: Almacena datos sin fecha de caducidad. Los datos estarán disponibles incluso cuando la pestaña del navegador/navegación esté cerrado o abierto de nuevo.

Almacenamiento de la sesión: Almacena los datos de una sesión. Datos persistido se borrarán tan pronto como el usuario cierre navegador el.

En los dos casos, por favor ten en cuenta que los datos de almacenamiento web no estarán disponibles entre los diferentes navegadores.

Ejemplo

Vamos a profundizar directamente en un ejemplo para tener una mejor comprensión del almacenamiento web en HTML5.

Vamos a crear una página web para configuración de usuarios, la cual, nos permitirá cambiar el color de fondo de la página y el tamaño de fuente del encabezado.

</pre>

<section><form onsubmit=”javascript:setSettings()”><label>Selecciona tu color: </label>

<input id=”favcolor” type=”color” value=”#ffffff” />

<label>Selecciona el tamaño de la letra: </label>

<input id=”fontwt” type=”number” max=”14″ min=”10″ value=”13″ />

<input type=”submit” value=”Save” />

<input onclick=”clearSettings()” type=”reset” value=”Clear” /></form></section>

<pre>

La función setSettings que se llama desde el evento onsubmit del formulario nos permitirá guardar los datos seleccionados por el usuario en el almacenamiento local.

Antes de usar el almacenamiento para guardar datos, debemos comprobar si el explorador admite el almacenamiento HTML5 o no.

Podríamos utilizar la API por defecto o Modernizr para comprobar la compatibilidad del navegador.

function setSettings() {

if (‘localStorage’ in window && window[‘localStorage’] !== null) {

//usa el objeto localStorage para almacenar los datos

} else {

alert(‘No puedes almacenar las preferencias del usuario porque tu navegador no soporta el almacenamiento local’);

}

}

Modernizr es una librería JavaScript que ayuda a detectar la compatibilidad del navegador para HTML5 y CSS. Descarga la última versión de  Modernizr e incluye la librería en el script del elemento.

<script type=”text/javascript” src=”modernizr.min.js”></script>

if (Modernizr.localstorage) {

//usa el objeto localStorage para almacenar los datos

} else {

alert(‘No puedes almacenar las preferencias del usuario porque tu navegador no soporta el almacenamiento local’);

}

La función setItem(‘key’,’value’) permite escribir la data en el almacenamiento local.

La excepción QUOTA_EXCEEDED_ERR será disparada si el límite del almacenamiento excede de 5MB. Así que siempre será correcto agregar el bloque try/catch en el código de almacenamiento mientras guarda la data.

function setSettings() {

if (‘localStorage’ in window && window[‘localStorage’] !== null) {

try {

var favcolor = document.getElementById(‘favcolor’).value;

var fontwt = document.getElementById(‘fontwt’).value;

localStorage.setItem(‘bgcolor’, favcolor);

localStorage.fontweight = fontwt;

} catch (e) {

if (e == QUOTA_EXCEEDED_ERR) {

alert(‘Espacio excedido!’);

}

}

} else {

alert(‘No puedes almacenar las preferencias del usuario porque tu navegador no soporta el almacenamiento local’);

}

}

Podemos comprobar si los datos se almacenan en el almacenamiento local utilizando las herramientas de desarrollo que viene con los navegadores. Por ejemplo, en Chrome, haga clic derecho en el navegador y selecciona “Inspeccionar Elemento”. Seleccione la ficha “Recursos” y, a continuación, haga clic en el elemento de “Almacenamiento Local”. Podemos ver los datos seleccionados por el usuario almacenados en forma de pares clave/valor.

La página web puede ser recargada con los valores de tamaño de fondo y la fuente establecidos por el usuario. El getItem (‘Key’) ayuda en la recuperación de los datos almacenados en la base de datos.

function applySetting() {

if (localStorage.length != 0) {

document.body.style.backgroundColor = localStorage.getItem(‘bgcolor’);

document.body.style.fontSize = localStorage.fontweight + ‘px’;

document.getElementById(‘favcolor’).value = localStorage.bgcolor;

document.getElementById(‘fontwt’).value = localStorage.fontweight;

} else {

document.body.style.backgroundColor = ‘#FFFFFF’;

document.body.style.fontSize = ’13px’

document.getElementById(‘favcolor’).value = ‘#FFFFFF’;

document.getElementById(‘fontwt’).value = ’13’;

}

}

La función length devuelve la cantidad total de valores en el área de almacenaje.

La función anterior se puede llamar durante el evento onload de la etiqueta body de la siguiente manera

<body onload=”applySetting()”>

El área de almacenamiento local se puede borrar mediante la función clear() o removeItem(“llave”). En nuestro ejemplo, la siguiente función se llama en el evento click del botón de borrado.

function clearSettings() {

localStorage.removeItem(“bgcolor”);

localStorage.removeItem(“fontweight”);

document.body.style.backgroundColor = ‘#FFFFFF’;

document.body.style.fontSize = ’13px’

document.getElementById(‘favcolor’).value = ‘#FFFFFF’;

document.getElementById(‘fontwt’).value = ’13’;

}

Eventos de almacenamiento

Cuando insertamos o eliminamos datos de la web de almacenamiento, un evento de almacenamiento se disparará en el objeto window. Podemos añadir detectores para el evento y manejar los cambios de almacenamiento si es necesario.

window.addEventListener(‘storage’, storageEventHandler, false);

function storageEventHandler(event) {

applySetting();

}

El objeto que maneja el evento tiene los siguientes atributos

  • key: la propiedad que ha cambiado
  • newValue: el nuevo valor ajustado
  • oldValue: valor almacenado previamente
  • url: la ruta URL completa de donde se originó el evento
  • storageArea: localStorage u objeto sessionStorage

Recuerda que el evento se activa sólo en otras ventanas (que no estén en la ventana donde se activa el evento) y el evento no se activa si no hay un cambio en los datos.

Los mismos métodos de la API son aplicables para el almacenamiento de las sesiones, así, excepto para los métodos, deben ser ejecutados en el objeto sessionStorage.

Conclusión

Así pues, ahora puedes comenzar a usar el almacenamiento Web para almacenar las preferencias del usuario, información de usuario, información de sesión, etc. También puedes intentar la creación de aplicaciones que se puedan utilizar completamente fuera de línea y los datos almacenados en línea pueden ser enviado de vuelta al servidor como una actualización por lotes cuando el usuario está en línea de nuevo.

Fuente original del artículo: Sitepoint
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Abhi dice:

    jejejejeje.siempre es bueno tener oeinocps, ya que hay me1s oeinocps de almacenamiento en la nube, pero me gusta publicar sobre estos proyectos.me gusta dar a conocer programas y proyectos de software libre,ya que tanto se puede usar en Windows como en Linux.Aunque en el software privativo aveces tambie9n hay buenas soluciones.Saludos.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder