Tuesday, April 2, 2013

Which HTML5 Storage Mechanism Should You Use?


The following HTML5 databases live in the user's web browser.  Using one of these options as your application's data storage mechanism will likely eliminate the need for a lot of client/server communications since data can now be stored, searched for and retrieved within the web browser.


HTML5 Storage

LocalStorage


  • Simple name/value pair storage
  • No query language
  • No transaction support (won't scale)

WebSQL


  • Fast, scalable, based on Sqlite database so it supports SQL queries, table joins, etc.
  • W3C Working Group dropped support for Sqlite

IndexedDB


  • Slightly faster than WebSQL
  • NoSQL, ORM syntax (JSON data and JavaScript objects)



Based on the facts above one would assume that IndexedDB is the way to go.

However, you must consider your audience...

HTML5 Storage Support in Desktop, Mobile and Tablet Browsers





not so recent

ie Browsers





Internet Explorer 7


Internet Explorer 8



Internet Explorer 9 


Storage
0
2
2
Session Storage »No Yes Yes 
Local Storage »No Yes Yes 
IndexedDB »No No No 
Web SQL Database »No No No 


Windows mobile

browsers

Windows Phone 6.5

Windows Phone 7


Windows Phone 8 



Storage
0
2
3
Session Storage »No Yes Yes 
Local Storage »No Yes Yes 
IndexedDB »No No Yes 
Web SQL Database »No No No 



middle-aged

browsers


Chrome 20

Firefox 15




 Safari 5.1  


Storage
4
3
3
Session Storage »Yes Yes Yes 
Local Storage »Yes Yes Yes 
IndexedDB »Yes Yes No 
Web SQL Database »Yes No Yes 



most recent most popular browsers

Internet Explorer 10


Chrome Canary


Firefox 19




Storage
3
4
3
Session Storage »Yes Yes Yes 
Local Storage »Yes Yes Yes 
IndexedDB »Yes Yes Yes 
Web SQL Database »No Yes No 








Storage
3
3
3
Session Storage »Yes Yes Yes 
Local Storage »Yes Yes Yes 
IndexedDB »No No No 
Web SQL Database »Yes Yes Yes 




recent mobile

browsers


Android 4.0



BlackBerry 10







iOS 6.0 

Storage
3
4
3
Session Storage »Yes Yes Yes 
Local Storage »Yes Yes Yes 
IndexedDB »Yes Yes No 
Web SQL Database »No Yes Yes 



Analysis


WebSQL is no longer supported in the most recent Android (4.0) mobile browser.
WebSQL has never been supported (and won't) in Windows mobile browsers.
WebSQL has never been supported (and won't) in Firefox browsers.

IndexDB was not supported in a Windows Internet Explorer (IE) device until IE 10
IndexDB is still not supported in Safari 6.0
IndexDB is still not supported in IOS 6.0




Conclusion


So, which HTML5 storage mechanism is the best?

As with most things dealing with application development... It depends.

If you can control your user population, then tell them to use the latest Chrome web browser and the latest Android mobile device and use IndexedDB.

If you have iPhone users, then use WebDB.

If you have a use case that strongly supports HTML5 storage, then you might implement both WebDB and IndexedDB and use device detection along with user profiles to determine local storage device affinity per user.  You can use the Strategy Pattern to indicate to the running application which one to use.

If you have a CEO that won't upgrade his web browser or Windows mobile device or you want to support every old device under the sun, then don't use HTML5 storage.

I'd be interested to hear if anybody thinks otherwise... Thanks!


References

http://lexsheehan.blogspot.com/2013/03/which-html5-features-to-use-in-your.html
http://en.wikipedia.org/wiki/Strategy_pattern


HTML5 Web Storage Tutorials

http://www.html5rocks.com/en/tutorials/webdatabase/todo/ http://www.html5rocks.com/en/tutorials/indexeddb/todo/
Sponsor Ads(Please visit one if you liked this article. Thanks!)

6 comments:

  1. Good guidance , really great ideas to use in developing and programming.


    iphone application development

    ReplyDelete
  2. Leeja, Thank you for your kind response. Cheers! ~ Lex

    ReplyDelete

  3. HTML5 design is an innovative version of HTML to meet the client. Many Website Design and creating organizations using accessibility of HTML5 semantic components for web style.


    html5

    ReplyDelete
  4. HTML5 is latest in which integrate with different languages as java can developed more secured applications like banking software development and other ERP modules.

    ReplyDelete
  5. Useful information like this one must be kept and maintained so I will put this one on my bookmark list! Thanks for this wonderful post and hoping to post more of this!

    Online Reputation Management Company & Best PPC Service Provider in India

    ReplyDelete
  6. Nice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.

    ReplyDelete