HTML5 Offline Data Storage Options

Question

A developer buddy of mine just recently started at a new company and one of his tasks is to come up with a new web application that allows their users to work offline when their staff are onsite in remote locations and then later to sync with a server side database of which they have not yet determined a server side provider yet (i'm guessing it will be SQL Server).

I've done some looking around and it seems like two viable options are LocalStorage and IndexedDb, with LocalStorage being the more popular technology? They want to go HTML5 and that's all fine and dandy, but long story short my question(s) is/are...

• What are their offline data storage options in HTML5?
• Are there older solutions that have better support?
  • are those methods less risky?
  • less time to implement?

The concept of storing data offline in a web application doesn't seem like a new idea, but doing so in today's newest technologies (html5, asp.net 4.0/4.5) is where you start getting into sparsely explored territory.

• what are some things that maybe your company does that works, and what doesn't work?

Any intelligent evidence based replies will more than likely get my upvote so don't just rush to get the first answer and try to score some quick points, I'm looking for some good solid feedback here. Thank you.

Answer 1

There are several possibilities of offline storage in HTML5: Web Storage Web SQL Database IndexedDB Filesystem API

You have a very good presentation of all these options here:

http://www.html5rocks.com/en/tutorials/offline/whats-offline/#toc-older-storage

Compared to older options (Cookies, Plugin Based Storage, Browser-specific features) , I'll quote from the article:

"The newer storage APIs, what we might call "HTML5 storage", are generally superior in terms of openness and standards compliance. Of course, not all browsers include all of the new APIs, and you may have to support older browsers that don't include any of them at all. So the older techniques are still useful for graceful degradation."

Other useful links:

http://php-html.net/tutorials/html5-local-storage-guide/

http://www.tutorialspoint.com/html5/html5_web_sql.htm

Hope this helps...