Persistencia de obxectos javascript con HTML5

Até o de agora a forma de almacenar datos persistentes no navegador cliente pasaban por empregar cookies. Outras solucións precisa(ba)n de plugins instalados no navegador: JRE + applets, Flash player + , SQLite + Firefox , Google Gears, ...

Cando HTML5 esté amplamente extendido poderemos facer uso do API DOM Storage de HTML5 co cal os datos poderán persistir sen ter que empregar a dificultade do traballo coas cookies. Combinando esta característica cos métodos JSON#stringify e JSON#parse podemos almacenar obxectos complexos dun modo moi sinxelo. Os pasos son os seguintes:

1.- Crear un obxecto javascript

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

2.- Convertilo a cadea con JSON#stringify:

objSerialized = JSON.stringify(obj);

3.- Gardalo no almacén local (localStorage):

localStorage.set('hashkey', objSerialized);

O proceso de recuperación, que se detalla a continuación, será persistente entre peticións e sesións:

1.- Recuperar o obxecto

objSerialized = localStorage.get('hashkey');

2.- Convertilo a obxecto javascript con JSON#parse e xa está dispoñible para traballar con él:

obj = JSON.parse(objSerialized);

 

Para probar esta funcionalidade implementei unha pequena clase javascript que garda nun array os contactos, para posteriormente ser serializados e gardados no localStorage. Para realizar este experimento empregouse o navegador chromium, no cal se poden ver os valores do localStorage facendo uso das developer tools.


Pantallazo da axenda web que emprega localStorage

O exemplo pódese probar directamente dende aquí (recomendado empregar google chrome para ver o local storage Ctrl + Shift + I)

Referencias:

Última actualización 2012-08-15
3:27 AM (Europe/Madrid)
Data de creación 2009-12-28
5:36 PM (Europe/Madrid)
Using localStorage to save javascript objects
javascript html5 chromebroser

Relacionados