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 ✘

not so recent mobile browsers	Android 2.2	iOS 3.1	BlackBerry OS 7

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