HTML5 Data Storage - localStorage or IndexedDB or WebSQL?

Well, first of all, I'm really sorry for not posting this long. I had exams, and I'm still having them so I might not post for a next few days too.

But anyway, If you're a mobile web app developer, looking to develop an HTML5 app and deploy it to Android or iOS with WebView then you're probably wondering, how do I store data on the person's device?

This guide will take you through the three possibilities and give you an insight in all the three such that you can make a choice. So, here we go!

Well, before we get into anything, let me tell you, cookies aren't what we're talking about. Cookies are only used to store preferences that are sent back to the server, and they are used for completely different purposes like tracking or authentication. Not for data storage!

localStorage

Well as an intro, localStorage is a part of a bigger thing called WebStorage, but I'll be specifically talking about localStorage. If you've developed for android before you probably know about SharedPreferences that are used for sharing/storing key-value pairs between activities. localStorage is similar; You get to store key/value pairs in the browser.

Pros: Really easy to use and supported by the major players.

Cons: Can only be used for key-value storage and not complicated data that you would normally store on a SQL Database. No sorting, indexing or other functionality that a DB would have.

IndexedDB

IndexedDB is basically a NoSQL database that gives you various functions to manipulate it rather than letting you execute SQL statements.

Pros: NoSQL!!! That probably is quite self explanatory.

Cons: Not supported in most browsers. NoSQL!! 

Yes NoSQL can be both a pro and a con. If you're a person like me who needs more power and functionality then you do need SQL and this isn't for you. But if you just want to implement something without caring about power or speed or you simply don't want to code, this is for you!

WebSQL

This is SQL for HTML, something I've ever wanted. Basically, you get to manipulate databases with SQL using WebSQL.

Pros: Fast and powerful, as you get to use SQL (SQLite specifically)

Cons: Not yet supported in most browsers! Only webkit based browsers like Chrome and Safari support it yet! 

Conclusion

So, we talked about this in the context of building a mobile app right? So, I think for a mobile app, WebSQL is what you're looking for.

However there are reasons you might not want to use any of the following for your mobile app. Limitations. Well, the browser decides how much you get to use in terms of storage space, databases, indices etc. So, what I would suggest in that case is that you use Android native code to store data (in case you're developing for android of-course!) and call the native function from your HTML! I've mentioned in an earlier post how to go about it.

So, that's pretty much it for this post. In the future we'll probably explore each of these technologies in detail.