Storage Technologies and Browser Support in HTML5

When web developers think of storing anything about the user, they immediately think of uploading to the server. HTML5 changes that, as there are now several technologies allowing the app to save data on the client device. It might also be sync'd back to the server, or it might only ever stay on the client: that's down to you.
There are several reasons to use client-side storage.

• First, you can make your app work when the user is offline, possibly sync'ing data back once the network is connected again.
• Second, it's a performance booster; you can show a large corpus of data as soon as the user clicks on to your site, instead of waiting for it to download again.
• Third, it's an easier programming model, with no server infrastructure required. Of course, the data is more vulnerable and the user can't access it from multiple clients, so you should only use it for non-critical data, in particular cached versions of data that's also "in the cloud".

Browser Support

Offline Technologies

• Web Storage
  It provides a key-value mapping, e.g. localStorage["name"] = username;. Unfortunately, present implementations only support string-to-string mappings, so you need to serialise and de-serialise other data structures. You can do so usingJSON.stringify() and JSON.parse().
• Web SQL Database
  It gives you all the power - and effort - of a structured SQL relational database.
• Indexed Database
  It is somewhere in between Web Storage and Web SQL Database. Like Web Storage, it's a straightforward key-value mapping, but it supports indexes like those of relational databases, so searching objects matching a particular field is fast; you don't have to manually iterate through every object in the store.
• File Access
  It is an API for reading file content in JavaScript. Given a set of files the user has added to a "file" input element, you can read the content of the file or reference it as a URL, e.g. if the user has specified an image file, you can show the image. There are also proposals underway for file writing capabilities.

For a details of client-side storage techniques, see our Client-Side Storage article.
Conclusion :
I hope that this article have helped you in understanding Storage Technologies and Browser Support in HTML5. Please share your knowledge if you know more about this. Your feedback and constructive contributions are always welcome.