Persistencia de objetos javascript en HTML5

Hasta ahora teníamos que emplear cookies u otras soluciones que usaban plugins instalados en el navegador: JRE + applets, Flash player + LSO(Local Shared Objects), SQLite + Firefox , Google Gears, ... para almacenar información persistente en el navegador cliente.

Con HTML5 contamos con una nueva técnica para almacenar datos persistentes en el navegador cliente. Cuando HTML5 esté ampliamente extendido podremos hacer uso del API DOM Storage de HTML5 con el cúal los datos persistirán entre sesiones sin tener que usar las limitadas cookies (4KB por cookie). Con el API DOM Storage y los métodos JSON#stringify y JSON#parse podremos almacenar objetos complejos de un modo muy sencillo. Los pasos son los siguientes:

1.- Crear un objeto javascript:

var obj = new Object();
obj.name   = name;
obj.email  = email;
obj.mobile = mobile;
obj.note   = note;

2.- Convertirlo a cadena con JSON#stringify:

objSerialized = JSON.stringify(obj);

3.- Guardalo en el almacén local (localStorage):

localStorage.set('hashkey', objSerialized);

El proceso de recuperación, que se detalla a continuación, será persistente entre peticiones y sesiones:

1.- Recuperar el objeto:

objSerialized = localStorage.get('hashkey');

2.- Convertilo a objeto javascript con JSON#parse y ya está dispoñible para trabajar con él:

obj = JSON.parse(objSerialized);

Para probar esta funcionalidad implementé una pequeña clase javascript que guarda en un array los contactos, para posteriormente ser serializados y guardados en el localStorage. Para realizar este ejemplo trabajé con el navegador chromium, en el cúal se pueden ver los valores del localStorage accediendo a las developer tools (Ctrl + Shift + I).

El ejemplo está disponible en http://vifito.eu/go/html5 (emplear google chrome u otro navegador que soporte el API localStorage)