html5 storage
DESCRIPTION
Introducción a HTML5 StorageTRANSCRIPT
![Page 1: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/1.jpg)
HTML5 Storage
Rodolfo Finochietti
![Page 2: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/2.jpg)
¿Por qué hablamos de acceso a datos en HTML?
• !Las aplicaciones web como los chicos crecen muy rápido!
![Page 3: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/3.jpg)
¿Por qué HTML 5 Storage?
• Para soportar escenarios que no se manejan bien con cookies
![Page 4: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/4.jpg)
Cookies
• Es el mecanismo actual para almacenar estado entre request´s HTTP– Limitaciones en tamaño y cantidad–Problemas de performance–Problemas de seguridad–Dificultad con aplicaciones multi-instancia
![Page 5: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/5.jpg)
HTML 5 Storage Standard´s
• ¿Dos o tres? –A veces los chicos no saben lo que
quieren• Web Storage• Indexed Database API• Web SQL Database
![Page 6: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/6.jpg)
Web Storage
• Diseñados para cubrir 3 escenarios–Múltiples transacciones–Múltiples sesiones–Trabajo con mucha información
• Soporte para aplicaciones Offline
![Page 7: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/7.jpg)
Web Storage
• Dos objetos, una interfaz– localStorage, sessionStorage
![Page 8: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/8.jpg)
Web Storage
• Soporte para Eventos
![Page 9: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/9.jpg)
Demo
Web Storage
![Page 10: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/10.jpg)
Indexed Database API
• Tablas ordenadas de objetos JavaScript– Estilo ISAM
• API Asincrónica
![Page 11: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/11.jpg)
Demo
Indexed Database API
![Page 12: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/12.jpg)
Soporte
• Web Storage– IE8+ (IE8 no soporta Storage Event, IE9 si)– Firefox 3.5+– Safari 4.0+– Chrome 4.0+
• Indexed Database API– Crome 11.0+– Firefox 4.0+
![Page 13: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/13.jpg)
¿Preguntas?
![Page 14: HTML5 Storage](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557ad78ad8b42a63778b459a/html5/thumbnails/14.jpg)
Recursos
• http://www.w3.org/TR/IndexedDB/• http://dev.w3.org/html5/webstorage/• http://html5demos.com/