Características HTML5 Offline Storage

Basandome en la presentación de HTML5 Rocks voy a describir algunas de las funcionalidades que incorpora HTML5 junto a CSS3 y a Javascript.

Vamos a explicar brevemente algunas de las características más importantes que trae. En el artículo de hoy veremos el almacenamiento local.

Offline Storage

El almacenamiento offline sirve para que en una aplicación web el usuario pueda mantener el estado de su sesión y los contenidos en su navegador incluso si pierde la conexión a internet. Un caso típico es el estar escribiendo un email y que se nos corte la conexión. Si el sitio tiene implementada alguna de las tecnologias de almacenamiento local no perderiamos la información y podríamos enviar el correo cuando recobremos la conectividad. Es muy util sobretodo para smartphone y moviles, ya que podemos encontrarnos en lugares sin cobertura pero seguir utilizando la aplicación normalmente.

Como implemento Offline Storage?

Mediante alguna de las siguientes alternativas:

Web Storage

Util para conservar valores en campos de formularios si por ejemplo refrescan al browser o lo cierran sin querer y queremos conservar un carrito de compras.
Podemos almacenar un valor con JS

window.localStorage.setItem(‘userName’,’Pablo Picasso’);

Y luego recuperlo

window.localStorage.getItem(‘userName’);

Web SQL Database

Muy poderoso para aplicaciones con tablas y registros de consulta frecuente. Permite realizar Queries SQL.
Podemos crear la Base de datos local con JS:

var db;
db = openDatabase(“miBase”, “1.0”, “Base de datos de la Aplicacion”, 5*1024*1024) //5 MB de espacio
db.transaction(function(tx) (ABRO LLAVE)

tx.executeSql(“CREATE TABLE usuarios (id REAL UNIQUE, nombre TEXT)”, [],funcionExito, funcionError);
(CIERRO LLAVE)
);

De la misma forma usando tx.executeSql podemos hacer consultas SELECT * FROM o INSERT y UPDATE de la base.

IndexedDB

Para realizar almacenamiento del tipo “Clave – valor” con preferencias del usuario

Application Cache

Muy importante! nos permite forzar al navegador cliente a que almacene los archivos CSS, imagenes y archivos JS asociados a nuestra web para que pueda serguir luciendo y funcionando correctamente si estamos sin conexion.

Para utilizarlo deberemos agregar el atributo que indica el archivo de manifest en el tag inicial de html

<html manifest=”aplicacionDeMail.appcache”>

y el archivo “aplicacionDeMail.appcache” deberá contener algo similar a:

CACHE MANIFEST
# version 1.0.0
CACHE:
/html5/js/jquery.js
/html5/css/style.css
/html5/images/fondo.png
NETWORK:
*

Más HTML5

En los próximos días voy a ir escribiendo nuevos articulos sobre HTML5, CSS3 y las nuevas caracterísitcas de JS.

Nos vemos pronto!

Capítulo 2: RealTime Communication

Leave a Reply

Your email address will not be published. Required fields are marked *