SlideShare a Scribd company logo

Html5 storage suggestions for challenges.pptx

•
•
D
deepmoteria

This document discusses various client-side storage options in HTML5, including web storage, web SQL database, and IndexedDB. It explains that web storage allows storing data locally within the browser, provides better performance than cookies, and includes localStorage for persistent data and sessionStorage for temporary data. While sufficient for simple storage needs, complex data manipulation is better handled by structured databases like IndexedDB, which stores data as JavaScript objects for fast access. The document also covers application caching to enable offline browsing and compares browser support for different storage technologies.

Related slideshows

Tech meetup: Web Applications Performance
Tech meetup: Web Applications PerformanceTech meetup: Web Applications Performance
Tech meetup: Web Applications Performance
 
PyGrunn2013 High Performance Web Applications with TurboGears
PyGrunn2013 High Performance Web Applications with TurboGearsPyGrunn2013 High Performance Web Applications with TurboGears
PyGrunn2013 High Performance Web Applications with TurboGears
 
003. ReactJS basic
003. ReactJS basic003. ReactJS basic
003. ReactJS basic
 
1 of 21
HTML5 Storage - Suggestions for Challenges Client side storages, making applications powerful, faster and work offline.
Web Storage Questions striking our mind?? ● What is it? ● What we were using before it? ● Why should we use it now? ● Are they sufficient enough for our application?
What is web storage? ● Client-side storag ● A standardized and native API that works the same way on any browser. ● Originally included in the Web Applications 1.0 specification, it has now its own specification called W3C Web Storage.
What we were using before it? ● Cookies for client storage. ● Cookies sent in every HTTP request. ● Data sent unencrypted. ● Size is very small (approximately 4KB). ● Limited number of cookies stored per domain.
Why should we use it now? ● Data not included with every request, but used only when asked for. ● Store large data(5MB approx.), without affecting performance. ● Data stored in key/value pairs and a page can only access data stored by itself.
Types of Web Storage ● Local Storage ○ Data stored is available to all scripts within domain and persist even after browser is closed. ● Session Storage ○ Data stored is available only to the script that stored the data and data is lost on closing of browser.
Are they sufficient enough for our application? ● Works fine with application with less client side data storage and manipulation. ● Complex to manipulate data using javaScript at client side when data is in bulk. ● Due to manual manipulation, high chances of poor performance and browser compatibility
Browser Support for Web Storage ● IE 8.0 and 9.0 ● Firefox 3.0, 3.5, 3.6 and 40 ● Safari 4.0, 5.0 and 6.0 ● Chrome 5.0, 6.0, 7.0, 8.0 and 9.0 ● Opera 10.5, 10.6 and 11.0 ● iOS Safari 3.2, 4.1 and 4.2 ● Android browser 2.2
What are its alternatives? ● Client side structured storage (database). ● WebSQL Database (Sqlite). ● Indexed DB.
Web SQL Database ● A real, relational database implementation on the client(SQLite). ● No need to write browser dependent code. ● Pure SQL Query. ● But, the specification is depricated. ● Need to transform JavaScript objects into relational schema. ● Not object driven.
Indexed DB ● Allows fast indexing and searching of objects. ● A NoSQL database works directly with JavaScript Objects. ● Works in asynchronous mode. This allows to work inside event driven module of JavaScript. ● Cursor API's, Key Range APIs, and Application Code for Query Mechanism ● Need to write browser dependent code at some instance for smooth performance.
Browser Compatibility for both Databases ● WebSQL ○ Chrome 4+ ○ Safari 4+ ○ Opera 11+ ○ iOs 5+ ○ Android 3+ ● Indexed DB ○ Chrome 11+ ○ Firefox 4+ ○ I.E 10
Application Cache?? ● ApplicationCache- HTML5 interface for caching. ● Offline browsing- users can navigate your full site when they're offline. ● Speed-cached resources are local, and therefore load faster. ● Reduced server load- the browser will only download resources from the server that have changed.
Some details ● Works on one manifest file. ● Need to add mimetype to server. ● Three major sections a. CACHE b. NETWORK c. FALLBACK
Browser Compatibility ● Application Cache (appCache) ○ Chrome 4+ ○ Safari 4+ ○ Opera 11+ ○ Firefox 4+ ○ I.E 10 ○ iOs 5+ ○ Android 3+ ○ Opera Mobile 11+
Discussion !! ● It seems that after using these things in our application (as per required) we can make application work offline. ri8?? ● Your opinion ??
Experience sharing ● Offline Application requirement. ● Can be achieved. ● Required : no user dependency at all. ● Problem with the current technology !!
Experience sharing(Contd...) ● Ultimately "old is gold." Java Applet was the solution for me. ● Still problem with some cases. ● Issue 1: registered as a bug in java official forum. ● Issue 2: Cannot access the close of browser.
Some more problems. ● Theoretically speaking javascript works fine for every browser. ● True, but sometimes behaviour slightly differs. ● Majority cases css issues with browsers. ● Eg.Difference in look of gmail in chrome and firefox (have a look at scrollbar :) )
Questions ?? Feel free to ask.
Thanks...

More Related Content

Html5 storage suggestions for challenges.pptx

  • 1. HTML5 Storage - Suggestions for Challenges Client side storages, making applications powerful, faster and work offline.
  • 2. Web Storage Questions striking our mind?? ● What is it? ● What we were using before it? ● Why should we use it now? ● Are they sufficient enough for our application?
  • 3. What is web storage? ● Client-side storag ● A standardized and native API that works the same way on any browser. ● Originally included in the Web Applications 1.0 specification, it has now its own specification called W3C Web Storage.
  • 4. What we were using before it? ● Cookies for client storage. ● Cookies sent in every HTTP request. ● Data sent unencrypted. ● Size is very small (approximately 4KB). ● Limited number of cookies stored per domain.
  • 5. Why should we use it now? ● Data not included with every request, but used only when asked for. ● Store large data(5MB approx.), without affecting performance. ● Data stored in key/value pairs and a page can only access data stored by itself.
  • 6. Types of Web Storage ● Local Storage ○ Data stored is available to all scripts within domain and persist even after browser is closed. ● Session Storage ○ Data stored is available only to the script that stored the data and data is lost on closing of browser.
  • 7. Are they sufficient enough for our application? ● Works fine with application with less client side data storage and manipulation. ● Complex to manipulate data using javaScript at client side when data is in bulk. ● Due to manual manipulation, high chances of poor performance and browser compatibility
  • 8. Browser Support for Web Storage ● IE 8.0 and 9.0 ● Firefox 3.0, 3.5, 3.6 and 40 ● Safari 4.0, 5.0 and 6.0 ● Chrome 5.0, 6.0, 7.0, 8.0 and 9.0 ● Opera 10.5, 10.6 and 11.0 ● iOS Safari 3.2, 4.1 and 4.2 ● Android browser 2.2
  • 9. What are its alternatives? ● Client side structured storage (database). ● WebSQL Database (Sqlite). ● Indexed DB.
  • 10. Web SQL Database ● A real, relational database implementation on the client(SQLite). ● No need to write browser dependent code. ● Pure SQL Query. ● But, the specification is depricated. ● Need to transform JavaScript objects into relational schema. ● Not object driven.
  • 11. Indexed DB ● Allows fast indexing and searching of objects. ● A NoSQL database works directly with JavaScript Objects. ● Works in asynchronous mode. This allows to work inside event driven module of JavaScript. ● Cursor API's, Key Range APIs, and Application Code for Query Mechanism ● Need to write browser dependent code at some instance for smooth performance.
  • 12. Browser Compatibility for both Databases ● WebSQL ○ Chrome 4+ ○ Safari 4+ ○ Opera 11+ ○ iOs 5+ ○ Android 3+ ● Indexed DB ○ Chrome 11+ ○ Firefox 4+ ○ I.E 10
  • 13. Application Cache?? ● ApplicationCache- HTML5 interface for caching. ● Offline browsing- users can navigate your full site when they're offline. ● Speed-cached resources are local, and therefore load faster. ● Reduced server load- the browser will only download resources from the server that have changed.
  • 14. Some details ● Works on one manifest file. ● Need to add mimetype to server. ● Three major sections a. CACHE b. NETWORK c. FALLBACK
  • 15. Browser Compatibility ● Application Cache (appCache) ○ Chrome 4+ ○ Safari 4+ ○ Opera 11+ ○ Firefox 4+ ○ I.E 10 ○ iOs 5+ ○ Android 3+ ○ Opera Mobile 11+
  • 16. Discussion !! ● It seems that after using these things in our application (as per required) we can make application work offline. ri8?? ● Your opinion ??
  • 17. Experience sharing ● Offline Application requirement. ● Can be achieved. ● Required : no user dependency at all. ● Problem with the current technology !!
  • 18. Experience sharing(Contd...) ● Ultimately "old is gold." Java Applet was the solution for me. ● Still problem with some cases. ● Issue 1: registered as a bug in java official forum. ● Issue 2: Cannot access the close of browser.
  • 19. Some more problems. ● Theoretically speaking javascript works fine for every browser. ● True, but sometimes behaviour slightly differs. ● Majority cases css issues with browsers. ● Eg.Difference in look of gmail in chrome and firefox (have a look at scrollbar :) )
  • 20. Questions ?? Feel free to ask.