HTML5 Client-side storage solutions


Since we are all aware that the data is usually stored on the server,we have a yet another unique feature that lets the user to store the data in the client side using several different API’s such as web storage, webSQL Database,Indexed Database and File hard drive.

HTML5 Client-side storage solutions

Reasons to use a client side storage rather than the server side-

  1. To make the web app available offline
  2. To improve the performance

The Features

Client side storage device:
The main aim of client-side storage is that the data is passed to the browser’s storage API which saves the data on the local device as it stores preferences and cache.One can not only save the data this API also lets the user to retrieve data and perform searching and manipulation.
All the four storage API’s put the data in a single location .
Example :
If the url saves some data then the browser will only permit the same domain to  access the data in future.Here the domains as well as the port number should also match for access of the data that is stored.
To get to know how much space can be used in the browser quotas is used.The browsers impose limits on storage capacity.When the app attempts to exceed that limit the browser will show the dialog to let the user confirm the increase.In some environments the users can see before hand how much data is being used for example like the chrome webstore.
Both client side storage and server side storage formats support transactions.Transactions prevent race conditions wherein two sequences of operations are applied to the database at the same time leading to results that are unpredictable.
Synchronous and Asynchronous modes:
In synchronous mode first the storage happens then the javascript code gets executed,but whereas in asynchronous mode the javascript code gets executed and then the storage happens.However synchronous mode should be avoided at all costs,because it blocks the rendering on the page and sometimes freezes the browser.

Different client-side storage API’S

Local Storage:
The webstorage consists of objects called as local storage and session storage.The local storage values can be set using localstorage.mydata=”data” and it can retrieved any time later even when the browser is closed and re-opened as local storage. mydata and there is also a second object called the session Storage which has the same functionality but it is cleared when the window is closed.
Web SQL Database:
It is a structured database with all the functionality and complexity of a typical relational database.It is supported on major mobile browsers like Android Browser,Safari,Opera and desktop browsers like Chrome,Safari and Opera.It supports a transactional database model.
Indexed Database:
An indexed database is a collection of “object stores” which are nothing but tables in which a user can just create objects and throw the objects into it.We can have any number of databases ,and to increase the search  speed we can make use of asynchronous API.
The file system is capable of storing BLOB content which is nothing but Binary Large Objects consisting of images,audio, video, PDF’s etc.,It gives good performance since it is an asynchronous API.It is available only on chrome and opera.It doesn't have a transaction support.

     //To check the availability of store
          localStorage.checkins = JSONs.stringify([]);

To create the database structure in Web SQL Database if it doesn't exist openDatabase is used

this.db = openDatabase('mysampledb','1.0','mysampledb Checkins', 8192);
tx.executeSql("create a table if it doesnot exists" + "checkins(id integer primary key asc, time integer, latitude float," + "longitude float, mysample string)", [],
function() {
console.log("it is working");

To set up an indexed database –

var db;
var myversion = 1;

window.indexedStore = {};

window.indexedStore.setup = function(handler) {
  // attempt to open the database
  var request ="mysampledb", version);

  // upgrade/create the database if needed
  request.onupgradeneeded = function(event) {
    var db = request.result;
    if (event.oldVersion < 1) {
      // Version 1 is the first version of the database.
      var checkinsStore = db.createObjectStore("checkins", { keyPath: "time" });
      checkinsStore.createIndex("moodIndex", "mood", { unique: false });
    if (event.oldVersion < 2) {
      // In future versions we'd upgrade our database here.
      // This will never run here, because we're version 1.
    db = request.result;

  request.onsuccess = function(ev) {
    // assign the database for access outside
    db = request.result;
    db.onerror = function(ev) {
      console.log("db error", arguments);

This is how we set up a file system:

setup: function(handler) {
    function(fs) {
        {}, // no "create" option, so this is a read op
        function(dir) {
          checkinsDir = dir;
        function() {
            {create: true},
            function(dir) {
              checkinsDir = dir;
    function(e) {
      console.log("error "+e.code+"initialising “);


Until now we have been only aware of storing our data in the server but here there is another concept called as the client storage where the data can be stored along with its preferences and cache at the client side itself.The browsers come with built in functionality of storing the data at the client side.So guys ,lets check out how this works!!!

Share this

Related Posts

Next Post »