eHussain's Blog (Hussain Cutpiecewala)

Hello www.

I am remembering, It was around 1:00 PM of this 16th. I was surfing internet to find solution to the problem I was facing, but suddenly my focus switched to the topic of Client Side Storage. So, Finally I got this interesting topic to share with you. I did little bit research work over it to collect the basic things. I have also prepared demonstration for it

As you may know, web is getting more and more dynamic these days, web applications like Google Wave, Gmail (Mobile) and other mobile app are capable of doing client side caching. For growing market of mobile, client caching is really nice to have feature.

Till 16th I was knowing just one way to store data on Client, the most popular Cookie. Cookie is simply the key-value pair that is stored in form of text file on client machine. The major limitation of cookie is its size, you can only store 4kb of data in cookie. So, web developers needed more smarter way to store details on client machine.

So, Client Side Storage method is one of the feature that came out of HTML5 bundle. Client Side Storage is memory space that is allocated to browsers to store persistent data. All data are associated with their domain.

HTML5 provides three ways to store data on client machine.

1. Local Storage
2. Session Storage
3. Database Storage

Let’s discuss all of them one by one.

1. Local Storage :

Most simplest form of storage available is Local Storage. HTML5 provides way to store key-value pairs on client machine. Data stored in Local storage is persistent. It means that, you can access those data in your further requests, even if browser window is closed. Data stored in Local Storage is accessible to all browser window.

It is one of the great way to implement client caching.

Here is the way to write Local Storage

// way to set local storage variable
localStorage.setItem(“userName” , “eHussain”);

// way to retrieve the value of local storage variable
alert(“User name is : ” + localStorage.getItem(“userName”));

// another way to retrieve the value of local storage variable
alert(“User name is : ” + localStorage.userName);

// way to remove the local storage variable
localStorage.removeItem(“userName”);

2. Session Storage :

You might be wondering for Session Storage at Client Side! But yes, HTML5 offers the way better solution than the Cookie. Session storage having ability to store data in amount of MBs.

Also, Unlike Cookie (which is sent to server for every requests), Session is not sent to the server for every requests. So, request load is minimal than the Cookie. However, this sessionStorage has nothing to do with Server’s Session.

Session Storage and Local Storage methods are identical. However they only differ in persistence and scope. Scope of the Session storage is limited only to specific browser window. Browser creates new instance of the Session Storage if you open same url in different tab/window. Also Data stored in Session Storage persist as long as browser window is open.

Here is the way to write Session Storage

// way to set session storage variable
sessionStorage.setItem(“userName” , “eHussain”);

// way to retrieve the value of session storage variable
alert(“User name is : ” + sessionStorage.getItem(“userName”));

// another way to retrieve the value of session storage variable
alert(“User name is : ” + sessionStorage.userName);

// way to remove the session storage variable
sessionStorage.removeItem(“userName”);

3. Database Storage :

We have discussed Session Storage, Local Storage and Cookie. You may have noticed, all techniques offers key-value method for storing the Data. But, sometimes you need way better solution to store huge amount of data on Client Side. One of the great way to do this is, Database. Database Storage is one of the best feature (I think) of HTML5. So far, as per my research, Safari is the only browser who supports the Database Storage. Database Storage uses the SQLite database, which is light weight, and fast.

Here is how you can make it.

var db = openDatabase(“Database_Name”, “Database_Version”);
database.executeSql(“SELECT * FROM tbl_users”, function(result1) {
  // iterate over resultset or do some other operation
  database.executeSql(“DROP TABLE tbl_users”, function(result2) {
    // do some cleanup
    alert(“My second database query finished executing!”);
  });
});

For many browsers Database storage has limited functionality and few vulnerabilities, I will discuss it some other day.

I have prepared the demonstration of Local Storage & Session Storage, If you have mozilla firefox then you can have a look at them.

If you liked this post then don’t miss to share it with other people. You can also post your valuable thoughts as comment below. That’s it for today, Signing off.

-
Hussain Cutpiecewala | ehussain