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 | |