Client-Side Storage

Introduction

With the growing interest of HTML 5, there also a lot of new concepts arising that specifically deal with client-side Storage for your Webapplication. Especially for Mobile Applications Client-Side-Storage can mean a big difference for the User Experience. In this post I would like to give an overview of existing techniques for Client-Side-Storage and specifically focus on Webstorage (sometimes called Dom Storage), which is the only one that is supported by all major browsers.

SQL-like storage

Relational Databases and SQL as a Query Language to retrieve that data, is the major concept of how persistence is implemented on most Webservers. Some database-implementations and their SQL-dialects have already made it to embedded systems, like SQLite on Android and iPhone. So it is pretty straightforwared to use the same technology for client-side-storage. There are two different techniques of interest:

• Web SQL Database
• Indexed DB

Web SQL Database was once on the  W3C Recommendation track and browsers like Chrome, Opera and Safari begann supporting it. But the team of Mozilla Firefox refused to support it, mainly because they felt it being to closely related to SQLite and not offering enough fexibility. So the W3C stopped working on it, and  it will propably be completely replaced by Indexed DB.

Indexed DB is right now a working draft of the W3C but intended to be a W3C recommendation at some point in the future. It offers an somewhat SQLite-like syntax to store and retrieve keys and their corresponding values. Its implemenation by the browser consists of an persistent B-tree data structure.

Indexed DB however is still very premature. Only Firefox 4 beta and Chrome 11 canaray are supporting it. Here is a Javascript-Shnippet that shows how you would store data inside it on your Client-Side:

var kids = [
  { name: "Anna" },
  { name: "Betty" },
  { name: "Christine" }
];
 
var request = window.indexedDB.open("CandyDB",
                                    "My candy store database");
request.onsuccess = function(event) {
  var objectStore = event.result.objectStore("kids");
  for (var index = 0; index < kids.length; index++) {
    var kid = kids[index];
    objectStore.add(kid).onsuccess = function(event) {
      document.getElementById("display").textContent =
        "Saved record for " + kid.name + " with id " + event.result;
    };
  }
};

(here is the related Article with more information)

Webstorage

Webstorage (or DOM storage) is the only technique that is supported by newer versions of all major browsers: IE 8+, Firefox 2+, Safari 4+, Chrome 4+ and Operage 10.5+. It only offers storing pairs of keys and their corresponding values. There are two different ways on how to store thes key-value-pairs:

• sessionStorage: this objects saves the data only for the very same session. Different browsers have different understandings on what a session actually is. But you can usually count on the data as long as the user hasn't closed the browser-application
• locationStorage: this objects saves the data for as long as possible. Browsers obviously offer a way for the user to delete stored data. But you could normally count on the data being available for pretty much ever; as long as it doesn't exceed 5 Megabytes for your domain.

You can take a look at my project myhealth.reeple.net where I prototyped an application using webstorage. The interesing part is, that you only have to open the url once and can afterwards navigate through the application without the necessity of further internet connectivity. This is an example on how I store a new entry a User just "posted" to his Client-Side-Storage:

$("#submit_button").click(function()  {

  // get the values

  var name = $('#input_name').val();
  var date = $('#input_date').val();
  var description = $('#input_description').val();
   
  // check how many objects we already have
  var num = localStorage['num'];
  if (num == null || num == undefined) {
   numEat = 0;
  }
  
  // save the new object
  localStorage[ num + '_name' ] = name;

  localStorage[ num + '_date' ] = date;
  localStorage[ num + '_description' ] = description;

  // increase the counter
  var numNew = parseFloat(num) + 1;
  localStorage['num'] = numNew;

});

The solution is a little bit rough around the edges, because I have to keep track of how many objects I have stored myself. And right now it only supports on type of objects. But  you see how it would work.

Conclusion

There are three basics that you should keep in mind after reading this post:

1. Right now only Webstorage (= DOM Storage) is at least supported by the newer Versions of all major browsers. It only offers Key-Value storage and retrieval and only up to 5 MB.
2. Web SQL Database was once on the W3C Recommendation track, but the specification work has stopped. It is still supported by some versions of Chrome, Opera and Safari. 
3. In the future Indexed DB (= WebSimpleDB or Indexed Database API) will probably gain a lot of momentum, but it is right now only supported by Firefox 4 beta and Chrome 11 canary. 

For further reading, check out:

• Mozilla about the road to IndexedDB: http://hacks.mozilla.org/2010/06/beyond-html5-database-apis-and-the-road-to-indexeddb/
• Comparison of IndexedDB and Web SQL Database: http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/
• John Resig about Webstorage: http://ejohn.org/blog/dom-storage/