Click here to Skip to main content
Click here to Skip to main content
Go to top

Beginner's Guide to HTML5 and CSS3 - Web Storage Wizardry (Part 10 of 12)

, 5 May 2014
Rate this:
Please Sign up or sign in to vote.
All about basics that one should know to work effectively with web storage. You will learn why and it can be used. Also you will be learning some of the best practices in using web storage.


Introduction


In this article we will be learning the basics about Web Storage and dive in deep to understand more about the Web Storage concepts. Below are the topics we will be focusing on.

Background

If you are a beginner , it's highly recommended to read through the following articles to understand more about the HTML and CSS.


Beginner's Guide to HTML5 and CSS3 - Writing Your First Code (Series 1 of 12)

Beginner's Guide to HTML5/CSS3 - Styling Your First Web Page (Series 3 of 12)

Beginner's Guide to HTML5 & CSS3 - Laying Out Your First Web Page (Series 4 of 12)

Beginner's Guide to HTML5 & CSS3 - Getting Fancy with HTML5 & CSS3 (Series 5 of 12)

Beginner's Guide to HTML5 and CSS3 - Formidable Forms with HTML5 (Series 6 of 12)

Beginner's Guide to HTML5 and CSS3 - Coding Canvas (Part 7 of 12)

Beginner's Guide to HTML5 and CSS3 - Starting with SVG (Scalable Vector Graphics) (Part 8 of 12)


What is HTML5 Web Storage?


HTML5 came up with a new API called Web Storage, which can be used to store data at client side. The web storage also called as a DOM storage, is a mechanism to persist data at client side.

With web storage, the data will be stored at client side as a key value pairs. What you store will be persisted and can be accessed with in a single or multiple window. There are two options for storing the data, you can either go with local storage or session storage; depending upon your requirements you can decide which one to go. If you ask where does the webstorage data is stored ? The data will reside in client browser; The browser will allocate certain amount of memory for managing the webstorage.

The Web Storage has a fairly simple API to write and retrieve data into a local storage. You might be thinking how much data can I store in a local storage? As per the specification, the browser should allocate at least 5MB of local web storage; however it varies by the browser vendors. With Internet Explorer, you can store up to 10MB of data per origin. Where as 15MB per origin in case of Chrome, Firefox and Opera.

When is comes to the browsers support for Web Storage, Chrome (4.0+) , Opera (10.5+), Firefox (3.5+), Safari (4.0+) and IE8+ all support Web Storage.

Here's how the origin is determined. The origin policy depends on the HTTP protocol, host and the port number. Let us see some of the example to have a better understanding.

Compared URL Outcome Reason
http://www.codeproject.com/dir/index.html Success Same protocol and host
http://www.codeproject.com/dir2/index.html Success Same protocol and host
http://username:password@www.codeproject.com/index.html Success Same protocol and host
http://www.codeproject.com:81/dir/index.html Failure Same protocol and host but different port
https://www.codeproject.com/dir/index.html Failure Different protocol
http://en.codeproject.com/dir/index.html Failure Different host
http://codeproject.com/dir/index.html Failure Different host (exact match required)
http://v3.www.codeproject.com/dir/index.html Failure Different host (exact match required)
http://www.codeproject.com:80/dir/index.html Depends Port explicit. Depends on implementation in browser.

Why and when to use Web Storage?


Previously before using web storage, cookies were used to store information at client side. It is still being used. Let us try to recall or learn something about cookies as we all need to understand so that we can work well with them.

A cookie is a text file stored on the user’s computer. The cookies are connected to the domain that your website runs on. You can store, read and delete the information in the cookie.

Cookie was great but they have have some limitations:

The cookies add to the load of every document accessed on the domain. Because the cookie is passed in HTTP headers each and every time when the user makes a HTTP Request.

The cookies allow up to only 4 KB of data storage only.

Security-conscious people and companies often turn them off the cookie storage as the cookie is vulnerable to hijacking. Meaning a malicious user can intercept the cookie information which is send over the network. Unless the web site is HTTPS enabled, with HTTP the cookie will always be sent in an unencrypted way in HTTP Requests.

With web storage, it supports more data to be stored locally. Unlike cookies the data that's stored in web storage are not sent in HTTP Requests which helps in reducing the network traffic.

Here's where the web storage usage can benefit. Web applications can use local storage to cache data from remote procedure calls to speed up the start up time which in turn builds a responsive user interface.

There are scenarios where you could use web storage to save the application state locally for a faster restore when the user re-enters the application; Saving the user's work if there is a network failure or outage etc. The applications can be designed to reconnect when ever the network is available and save all the information with in the web storage.

Now we will have a look into some of the benefits of web storage.

  • Reduces the network traffic as the data which is stored in the web storage don't have to be a part of the HTTP Request.
  • Cache data from remote procedure calls and load cached data upon start up which in turn leads to faster start up.
  • When it comes to saving temporary state, web storage is preferable.
  • Web storage is good to be used when you want to restore the state upon application reentry.

Here's why we need to store the data locally at client side.

Retaining the state of an application – When the user comes back after closing the browser, everything will be as the user had left it. That’s how you improve the user experience by loading the already stored data with in the web storage.

Caching Static Data – If there are some static data then there is no point in loading it over the Internet if local access is so much faster. You could also consider loading the images from the local storage as opposed to loading from internet.

Storing user preferences – Some of the personal preferences for your site can be stored in a web storage than keeping the data on server as sessions.


Web Storage basics and how to use it


The web storage provides two ways to store data at client side. The local storage and session storage are the options to store some temporary data in clients browser and use it later.

Let us first understand the scope of persistence in web storage.

LocalStorage can hold up to 5MB per origin and per browser. The 5MB per origin, is as per the HTML5 specification. This limit can be increased by the user when needed; however, only a few browsers support this. The data is shared across every window or tab of one browser for that specific origin only. The data with in a local storage is stored as key-value pairs. The local storage data will be available say when the user closes the browser and reopens it again.

SessionStorage is similar to local storage. However the data is accessible only for the window or tab which has created it. The data is stored as key-value pairs. The session storage data will be lost when the user closes the browser. Note – The session storage limit is purely specific to browser vendors; most of them don't set the limit. which means it is limited to systems memory.

The below picture shows the pictorial representation about the scope of the data that's persisted in the Web Storage.

WebStorageBasics

Now let us learn how to use it. We will be covering the below mentioned steps

1. Check for browser support

The first thing to do is, check whether the browser supports web storage or not. Here are the methods we define to check for the browser support.

Code snippet to check if the browser supports the web storage.

if(typeof(Storage)!=="undefined")
{
    // Code for localStorage or sessionStorage.
}
else
{
    alert('Your browser does not support Web Storage');
}

function IsLocalStorageSupported() {
   try 
   {
      return "localStorage" in window && window["localStorage"] !== null;
   }
   catch (e) 
   {   
      alert('Your browser does not support local storage');
   }
}

function IsSessionStorageSupported() {
    try 
   {
      return "sessionStorage" in window && window["sessionStorage"] !== null;
   }
   catch (e) 
   {   
      alert('Your browser does not support session storage');
   }
}

Alternatively you could do

if(typeof window.sessionStorage == "undefined"){return;}

2. Write data to Storage

Now we will see how we can write some data in web storage. All you need is a key name and a string value to write into a storage.

The setItem(key, value) method is used passing in the key, value that needs to stored.

localStorage.setItem("author", "Ranjan.D")
sessionStorage.setItem("author", "Ranjan.D")

3. Read data from Storage

Now we will see how we can read the data that's stored in a web storage. The data with in a web storage will be stored as a key value pairs. You will have to use a key name to get the value associated with it.

The getItem(key) method is used to get an item from a web storage by keyname.

var authorLocal = localStorage.getItem("author");
var authorSession = sessionStorage.getItem("author");

4. Delete data from Storage

With local storage, unless until you explicitly delete the item; it will reside with in the local storage. But with session storage, the data will be cleaned up when the user closes the browser.

You can use removeItem(key) to remove a item from web storage by keyname. If you want to clear all the storage data for a origin, then you will have to use clear() function.

localStorage.clear() - Used to clear all the local storage data for a specific origin.
sessionStorage.clear() - Used to clear all the session storage data for a specific origin.

localStorage.removeItem(“author”) - Removes an item from the local storage with a keyname = 'author'
sessionStorage.removeItem(“author”) - Removes an item from the session storage with a keyname = 'author'

The localStorage Object

The local storage is used to store domain specific data at client side and manipulate this data without the need of server storage. We can store a minimum of 5 MB of data. For security reasons, there is no way to access other domain specific storage areas; which also includes the sub-domain of the current website.

The data in a local storage gets stored as a key/value pair. When dealing with object types, you will have to first serialize and then store. JSON.stringify can be used to serialize the JSON objects.

With the local storage, the data will not have to be transmitted to server with every request as cookies do, nor does the data in a local storage area gets expired.

Here are the list of local storage functions.

clear – A clear function is used to clear all key/value pairs stored in the storage.

localStorage.clear();

getItem(key) – getItem function is used to get value from the storage by key.

localStorage.getItem(key);

key(index) – key with an index function is used to get storage key by index.

for(var i = 0; i < localStorage.length; i++)
    localStorage.key(i);

length – A length function is used to get the number of key/value pairs in storage.

localStorage.length;

remainingSpace – This function is only supported in IE 8 only which can be used to get the remaining space in bytes.

localStorage.remainingSpace;

removeItem(key) – The removeItem with a key function is used to remove a value from storage using its key.

localStorage.removeItem(key);

setItem(key, value) – The setItem with a key and a value is used to insert new or update existing value for a storage item.

localStorage.setItem(key,value);


Local Storage events


A storage event gets fired when you are performing an insert, update or delete a local storage area. These events are notifications to other open browser windows (also includes pop up windows, iframes) or tabs (for the same origin) than the one that has actually performed the operation. When the storage area gets changed, the storage event gets fired for other open windows or tabs that are all sharing the same storage area.

Here's how you can attach a local storage event.

key ― The key field, is the key argument of setItem() or removeItem() functions. The key field will be null when a clear() function causes the event to be fired.

newValue ― the newValue is the value argument to setItem(). Note - calls to removeItem() and clear() cause this field to be null.

oldValue ― The oldValue field holds the key’s value prior to a call to setItem() or removeItem(). Calls to clear() cause this field to be null.

url ― The url field stores the address of the page whose storage area was affected.

storageArea ― The storageArea field corresponds to the local or session storage area that was changed.

Here's an example:

window.addEventListener("storage", function(event) {
 var key = event.key;
 var newValue = event.newValue;
 var oldValue = event.oldValue;
 var url = event.url;
 var storageArea = event.storageArea;
 …..
});

How are we going to detect whether the browser supports local storage ?

Here's the function that can be used to check for the existence of local storage.

function IsLocalStorageSupported() {
   try 
   {
      return "localStorage" in window && window["localStorage"] !== null;
   }
   catch (e) 
   {   
      alert('Your browser does not support local storage');
   }
}

Handling local storage exceptions.

There are mainly two types of errors or exceptions that are thrown while working with local storage.

1. QUOTA_EXCEEDED_ERR – You will see this type of exception happening when you are trying to store some values into a local storage but the storage capacity exceeds the limit.

2. SECURITY_ERR – Happens when you are trying to access the local storage data from a different origin. Usually this would not happen.

Here's the code block which handles the local storage exceptions.

try {
    localStorage.setItem(key, value);
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR)
        alert('Local Storage Quota exceeded!');
 if(e == SECURITY_ERR)
    alert('Local storage security exception. Trying to access a data from a different domain');
}

Adding Items to Local Storage:

Let us now see how to add items in to local storage.

If you wish to add items into a local storage area, you will have to make a call to setItem, it takes two arguments, we need to pass a key and a value. Note – if the key is already existed in the local storage, it will simply update the existing key's value.

Here are some of the examples:

localStorage.setItem("company", "CodeProject");
localStorage.setItem("author", Ranjan.D);

Note – You could also add values to local storage by using assignment statements like below.

localStorage["author"] = "Ranjan.D";

Working/keyvalue

Retrieving Data from a Local Storage:

The item with in the local storage can be retrieved by the key name. getItem() method is used to retrieve. It takes an argument, that is the key name.

Here's how we retrieve the above stored items.

var author = localStorage.getItem("author");
var company = localStorage.getItem("company");

Note – If the key exist in the local storage, the getItem returns the corresponding value; else if the key not exist, the getItem method returns null.

Now we will see how to iterate over the local storage data. The following code loops through the local storage to get all the items stored with in it.

for (var i = 0; i < localStorage.length; i++) {
 var key = localStorage.key(i);
 var value = localStorage.getItem(key);

 // Here you do something with the key and value
}

Removing item from a Local Storage:

With local storage, the data within it will not be cleared unless you explicitly remove it. Here we will see how to clean up or remove a key value pair that is stored in a local storage.

removeItem() function is used to remove a specified item from the local storage. It takes an argument, that is the key name to remove an item.

If you wish to clear all the data with in the local storage for a particular domain then you could use clear() function.

localStorage.clear(); - Code used to clear all the local storage for a domain.

localStorage.removeItem("author") - Removes a key value pair with the specified keyname = 'author'.

Let us take a look into few examples and try to learn something about web storage.

To-Do List

The To-Do list allows us to manage our day to day To-Do Activities. It's a simple offline web application which manages all the data with the help of local web storage.

Here's the prototype of our application. It's a single page application with three controls.

To-DoList-Prototype

We will be using localstorage so that we can restore the To-Do items when the user gets back the site.

Here's the HTML page would look like.

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">  
    <title>A Simple To-Do List With LocalStorage.</title>
</head>
<body>
<div id="contentMain">
<h1>To-Do List</h1>
     <ol id="myList" contenteditable="false">
          <li>Key in your To-Do Items!. Hit Enter for more Items.</li>
     </ol>
<input id="editToggleButton" type="button" value="Edit"/>
<input id="resetButton" type="button" value="Reset"/>
</div>
</body>
</html>

We will be focusing on the localstorage to see how the To-Do list items can be saved and restored upon reload.

Here's the code block which is responsible for saving the To-Do list items in local storage.

function saveContents() 
{
  if (window.localStorage) 
  {
      try 
      {
          var listOfThingsToDo = document.getElementById("myList").innerHTML;      
          localStorage.setItem("myToDoList", listOfThingsToDo);
      }
      catch(e) 
      {
          if (e == QUOTA_EXCEEDED_ERR) {
             alert('Local Storage Quota exceeded!');
          }
          else {
              alert(e.message);
          }
      }   
   } 
}

function restoreContents() 
{
      if (window.localStorage) 
      {
          var mySavedList = localStorage.getItem("myToDoList");
                
          if (mySavedList != undefined) {
             document.getElementById("myList").innerHTML = mySavedList;
          }
      }
}

Let us analyze the save logic.

1. First we get the list inner HTML. It will be used as a value to store in local storage.

2. We use localStorage.setItem with a key name= ' myToDoList' to save the list inner HTML.

Here's how the local storage looks like when we do inspect element and navigate to “Local Storage” in Chrome.

WebStorage-ToDoList2

Let us now analyze the restore logic.

1. We will try to get the To-Do list items from the local storage based on the key name = ' myToDoList'

2. If the value is not 'undefined' meaning we have something stored in the webstorage. We will be setting this value to our list inner HTML.
Here's how our To-Do application looks like.

WebStorage-ToDoList1

Store and Load Images from a Web Storage

Let us now see how to store and load an image from a local web storage.

For this example, we will be using CodeProject Logo. First thing we need to do is, getting the base 64 encoded image.

Here's the script used to load our logo. Note – The script does not contain full base 64 encoded logo. I have purposely stripped down all of them because it was too lengthy.

We are trying to get the logo by using keyname = 'logo' , if the logo exist then we will be using the same to load image.

If we don't have one in localstorage, you can notice below we are using setItem (key = 'logo' and value as base 64 encoded logo) to store the logo in local storage.

<script>
var cpLogo;

if ( localStorage.getItem("logo")) {
  cpLogo = localStorage.getItem("logo");
}
else {
  cpLogo = 'R0lGODlh+gCHAOYAAP/////8+P/58P/z4P/v2O/v7//s0P/mwP/fsP/cp9/f3//ZoP/Vlv/MgP/..........'; 
  localStorage.setItem("logo",cpLogo);
}

document.getElementById("logo").src='data:image/png;base64,' + cpLogo;
</script>

ImageLoading-LocalWebStorage

Number of visits for a page.

Let us take a look into another example to track the number of visits for a website. Here's the HTML code , you will notice that we have included the javascript NumberOfVisits.js , which has all the logic required for storing and clearing the local storage key, value pairs.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Local Storage</title>
  <script src="js/NumberOfVisits.js"></script>

  <script type="text/javascript">
      var visitCount = new NumberOfVisits();
      visitCount.Init();

      function StoreName(name) {
          visitCount.StoreName(name);
      }

    function  ClearLocalStorage(){
        visitCount.ClearLocalStorage()
    }
  </script>

</head>
<body>
  <h1>Web Storage Example - Visit Counter</h1>

  <div id="visitcounter"></div>

  <div id="rest">
    <label>Enter your name: </label>
    <input type="text" id="name" /><br />

    <button type="button" onclick="javascript:StoreName(document.getElementById('name').value)">Save/Update my name</button>

    <p>Your total visit count is stored in your localStorage, you can
    inspect this using the Resources tab in Google's Chrome Developer
    Tools</p>

    <button type="button" onclick="javascript:ClearLocalStorage();">Clear web storage</button>
  </div> 
</body>
</html>

Now we will see the javascript logic for storing , retrieving and clearing the local storage key value pairs.
Here's the Init() function which gets called on every page load. You will notice below, the first thing that we are doing here is, check whether the Storage is supported by the browser; If so we will try to get the number of visits by key name = 'numvisits' else it means you are trying to open the site for first time, hence we set the item count to 1.

Init: function () {
        // Check whether the browser supports Web Storage.
        if (typeof (Storage !== "undefined")) {
            if (localStorage.getItem("numvisits")) {
                this.numvisits = parseInt(localStorage.getItem("numvisits"), 10) + 1;
                localStorage.setItem("numvisits", this.numvisits);

                this.welcomename = "";
                if (localStorage.getItem("name")) {
                    storedname = localStorage.getItem("name");
                    this.welcomename = ", " + storedname;
                    name.value = storedname;
                }

                return "Welcome back" +
                     this.welcomename +
                     "! You have visited this page " +
                     this.numvisits +
                     " times.<br />";
            } else {
                localStorage.setItem("numvisits", 1);
                return "Hello and welcome! I see you haven't visited here before.";
            }
        } else {
            alert("Your Browser does not support the web storage APIs");
        }
    }

The local storage setItem function is used to set the item value. We will have to pass in the key name and the value.

In order to retrieve an item from the local storage, we use the getItem with a keyname.
We will see the second function used in numberOfvisits.js which is used to store a key, value pairs.

StoreName: function (name) {
       if (localStorage.getItem("name")) {
            var storedname = localStorage.getItem("name");
 
            if (confirm("Your name is already stored as " +
                    storedname +
                    ". Are you sure you want to change it to " +
                    name + "?")) {
                localStorage.setItem("name", name);
                alert("Your name was updated, reload the page to get your updated welcome!");
            } else {
                alert("OK, I'll keep calling you " + storedname);
            }
 
        } else {
            localStorage.setItem("name", this.name);
            alert("Your name has been stored as: " +
              this.name +
              ". Reload the page to receive your new welcome!");
        }
}

Now we will see the function used to clear the local storage items. Here's the javascript code for the same. You will notice below, we have used local storage function removeItem with a key name, which removes an item by key name.

​ClearLocalStorage: function () {
        window.localStorage.removeItem("name");
        window.localStorage.removeItem("numvisits");
        alert("reload the page");
    }

NumberOfVisitCounter

CodeProject Offline Editor Sample

Now we shall build something really interesting here. This sample is all about how we re-use and build an Offline CodeProject Editor (Un official).

When I was researching on web storage, I was thinking about building something really intreseting usecase where we all can use in our day to day life when we are writing articles.

Let us get started. Here's the source which we will be using to build an offline editor.
https://git.codeproject.com/codeproject/codeproject/wysiwyg-editor

The first thing we need to do in order to make the editor offline is, we need to identify all the resources which are being accessed online. You will see some of the javascrip libraries, style sheets, images etc is being referenced directly from codeproject domain. Now you can get all these files which are touching the network, then create a folder for images, scripts, styles and dump them all.

The next thing is to re-design the UI a bit to accept key name, have a dropdown to select the saved articles, at last have a button to save the article in localStorage area.

Here's how it looks like. Although the new design doesn't look very professional but it serves our purpose, all we need is to manage offline articles.

Now download the article source code and create a virtual directory and point to the offline editor source. Also do remember to set permissions if you are unable to run the web page. Usually you will have to add Network Services, Users accounts and set the read permission.

CodeProjectOfflineEditor
You can see above that we have typed some texts in editor and the contents are also saved in local storage. You might ask a question, how do I add images ? Assuming you have hosted this one under IIS. Now you can create a folder for images under the same virtual directory so that the web server can access the folder and files that you are specifying. By using article editor insert image option, you can go ahead and add some images. But do remember to change the image url when you are publishing the article.

Now we will see the inner working. The key thing we need to understand is, how to store and retrive article content from localStorage. Here's the javascript code that does our work.

The IsLocalStorageSupported function is used to check whether the browser supports local storage.

The SaveArticleContentInLocalStorage function takes two parameters, the keyname and article content. This function first checks whether the local storage is supported. If so, it will save the article content in localStorage by making a call to setItem of localStorage object. Also notice how the error handling is done.

The GetArticleContentFromLocalStorage function is used to fetch the article content from localStorage by keyname.

We have another function GetAllKeysFromLocalStorage, which is used to get all the localStorage keys. Remember the enhanced article editor now shows a dropdown to select article. This is were we are using all these keys and build the dropdown.

var CodeProjectEditor = {};

CodeProjectEditor.IsLocalStorageSupported = function () 
{
    try {
        return "localStorage" in window && window["localStorage"] !== null;
    }
    catch (e) {
        alert('Your browser does not support local storage');
    }
};

CodeProjectEditor.SaveArticleContentInLocalStorage = function (keyName, content) {
    if (CodeProjectEditor.IsLocalStorageSupported()) {
        try {
            localStorage.setItem(keyName, content);
        } catch (e) {
            if (e == QUOTA_EXCEEDED_ERR)
                alert('Local Storage Quota exceeded!');
            if (e == SECURITY_ERR)
                alert('Local storage security exception. Trying to access a data from a different domain');
        }
    }
};

CodeProjectEditor.GetArtileContentFromLocalStorage = function (keyName) {
    if (CodeProjectEditor.IsLocalStorageSupported()) {
        return localStorage.getItem(keyName);
    }
};

CodeProjectEditor.GetAllKeysFromLocalStorage = function () {
    if (CodeProjectEditor.IsLocalStorageSupported()) {
        var keyArray = [];
        for (key in window.localStorage) {
            keyArray.push(key);                
        }
        return keyArray;
    }
};

Now we will see how we can use the above javascript code. Here's the code we will be using this in editor.html. When you are saving an article, we will be getting the key name from the keyname textbox and the article content is obtained from the iframe; after saving we will be adding the newly added keyname to selectArticleOptions dropdown.

 function Save() {
    var keyName = $('#keyName').val();
    if (keyName == '') {
        alert('Please enter Key Name');
        return;
    }

    if ($('#selectArticleOptions option:contains(' + keyName + ')').length) {
       alert('Key name already exists. Please try other name');
       return;
    }

    var content = document.getElementById('cke_1_contents').childNodes[1].contentDocument.body.innerHTML;
    CodeProjectEditor.SaveArticleContentInLocalStorage(keyName, content);
    addOptionItem(keyName);
    alert('Saved Successfully!');           
 }

 function addOptionItem(keyName) {
     if ($('#selectArticleOptions option:contains(' + keyName + ')').length) {
          return;
     }
     $('#selectArticleOptions').append($('<option>', {
        value: keyName,
        text: keyName
     }));
 }

Below is the code block which we will be using to fetch all the local storage keys and load them to drop down; further, we will default the article content by preselecting the first keyname in the dropdown. Notice the function call GetArticleContentFromLocalStorage which expects a parameter i.e the key name.

<script>

    // Add all localStorage key items if we have one
    var keyItems = CodeProjectEditor.GetAllKeysFromLocalStorage();
    for (var i = 0; i < keyItems.length; i++) {
        addOptionItem(keyItems[i]);
    }

    if (keyItems.length > 0) {
        $('#keyName').val(keyItems[0]);
        $('#ArticleContent').html(CodeProjectEditor.GetArtileContentFromLocalStorage(keyItems[0]));
    }

    $('#selectArticleOptions').change(function () {
        $('#keyName').val(this.value);
        var content = CodeProjectEditor.GetArtileContentFromLocalStorage(this.value);
        if (content != null) {
            document.getElementById('cke_1_contents').childNodes[1].contentDocument.body.innerHTML = content;
        }
    });
  
</script>

The sessionStorage Object

The session storage is similar to that of local storage. It has similar methods to deal with managing session storage data.

Unlike local storage, where you could access the local storage data from multiple tabs or windows; with session storage, it stores the data only for that session. Hence the data that you store in a window or a tab is not accessible to other tabs or window because it will be a different session. Also the session storage data gets automatically deleted when the user closes the browser.

Now let us see some of the methods of session storage object which can be used for managing the data. Note – The session storage methods work exactly the same as what it does with local storage.

The setItem with a key and a value parameter is used to save an item in a session storage.

Here's an example, which stores two items with a key – company, author.

sessionStorage.setItem("company", "CodeProject");
sessionStorage.setItem("author", Ranjan.D);

The getItem with a key, returns the value associated with the specified key. If key not present, it will return null.

Here's an example:

sessionStorage.getItem("author"); or sessionStorage[“author”]

To clear all the sessions storage items, you will have to call the clear method of a sessionStorage object. If you wish to remove a single item, then you can use the removeItem method.

sessionStorage.clear(); - Code used to clear all the local storage for a domain.

sessionStorage.removeItem("author") - Removes a key value pair with the specified keyname = 'author'.

Let us look into an example to understand how the session storage works.

It's a simple HTML page which demonstrates the usuage of session storage - add, remove and clear.

Add Storage:

The addStorage method gets the key and the value from the input element with id as 'storageKey' and 'storageData'. The code checks for the sessionStorage is supported, if not we are alert stating that 'no sessionStorage in window'. If the browser supports sessionStorage, we are storing the key value pair by making a call to sessionStorage.setItem , passing in the key , value.

Remove Storage:

The removeStorage function gets the key from the input element with id ='removeKey'. Then the code checks for the sessionStorage is supported, if not we are alert stating that 'no sessionStorage in window'. If the browser supports sessionStorage, we are removing the sessionStorage item by making a call to sessionStorage.removeItem , passing in the key name.

Clear Storage:

The clearStorage function in this example is used to clear all the sessionStorage items. The code checks for whether the sessionStorage is supported by the browser. The code checks whether the sessionStorage length is greater than 0; if so, when we make a call to sessionStorage.clear() will clean up all the items with in the sessionStorage object.

Here is an example which demostrates how we can add, remove or clear sessionStorage.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WEB STORAGE SAMPLE</title>
    <script>
        function addStorage() {
            var key = document.getElementById('storageKey');
            var data = document.getElementById('storageData');

            //sessionStorage setItem
            if ("sessionStorage" in window) {
                sessionStorage.setItem(key.value, data.value);
                location.reload();
            } else {
                alert("no sessionStorage in window");
            }
        }

        function removeStorage() {
            var key = document.getElementById('removeKey');

            //sessionStorage removeItem
            if ("sessionStorage" in window) {
                if (sessionStorage.length > 0) {
                    sessionStorage.removeItem(key.value);
                    location.reload();
                }
            } else {
                alert("no sessionStorage in window");
            }
        }

        function clearStorage() {
            //sessionStorage clear
            if ("sessionStorage" in window) {
                if (sessionStorage.length > 0) {
                    sessionStorage.clear();
                    location.reload();
                }
            } else {
                alert("no sessionStorage in window");
            }
        }

        window.onload = function () {
            var localhtml = "";
            var sessionhtml = "";

            //sessionStorage key and getItem
            for (var index = 0; index < sessionStorage.length; index++) {
                sessionhtml += "<li>" + sessionStorage.key(index) + " : " + sessionStorage.getItem(sessionStorage.key(index)) + "</li>";
            }
            document.getElementById('sessionStorageData').innerHTML = sessionhtml;
        }
    </script>
</head>
<body>
  <h1>Session Storage</h1>
    Storage key :
    <input type="text" id="storageKey" style="width: 50px" />
    value :
    <input type="text" id="storageData" style="width: 50px" />
    <input type="button" id="save" value="SAVE" onclick="addStorage(); return false;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Storage key :
    <input type="text" id="removeKey" style="width: 50px" />
    <input type="button" id="remove" value="REMOVE" onclick="removeStorage(); return false;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    clear Storage :
    <input type="button" id="clear" value="CLEAR" onclick="clearStorage(); return false;" /><br />
    <br />
    sessionStorage Data :
    <div id="sessionStorageData">
    </div>
</body>
</html>


Web Storage (Local and Session Storage) Sticky Note Sample

Let us take a look into combined local and session storage sample here. This example is all about implementing sticky notes application. For demonstration purpose we will be implementing session and local storage. However in real world scenario it makes sense to go with localStorage alone.

Here's how the final sticky note application looks like. We will be seeing in detail about it's inner working. It has a simply user interface to capture the Title, Description. On selection of Local or Session Storage radio button options and on click on Save and Refresh Sticky notes button, will show the all the sticky notes.

StickyNotesMainPage

On document ready of Sticky notes page, we will be registering some of the button click events and make a call to load the sticky notes by default from Local Storage.

$(document).ready(function () {

    //Add button click event
    $('#addNew').click(function () {
        addNewRow();
    });

    //Refresh notes button click event
    $('#refreshNotes').click(function () {
        refreshNotes();
    });

    //Delete button click event
    $('.deleteButton').click(function () {
        deleteRow($(this));
    });

    $('input:radio[name=storage]')[0].checked = true;

    $("input:radio[name=storage]").change(function () {
        LoadFromWebStorage();
    });

    LoadFromWebStorage($("input:radio[name=storage]:checked").val());
});

Now we will slowly dig into the inner workings. Here's the code snippet to check whether the web storage is supported by the browser which you are using it use sticky application. Depending upon the radio buttion option, we check for the localStorage or sessionStorage type exists; if it says undefined, then this method returns false.

function IsStorageSupported() {
    var storage = $("input:radio[name=storage]:checked").val();

    if (storage == "local") {
        if (typeof (localStorage) == "undefined")
            return false;
    }  
    else
    if (storage == "session") {
        if (typeof (sessionStorage) == "undefined")
            return false;
    }    

    return true;
}

Here's the code block to load sticky notes based on local or session storage. The code block checks whether web storage is supported.

By default the local storage radio button will be selected and in that case, we will be looping through all the keys within the localStorage and based on the key, we will be getting the value. Note - The create notes function expects two parameters, the tite and description and that's the reason we are splitting the value by delimiter i.e '^^^'.

function LoadFromWebStorage(){
    var storage = $("input:radio[name=storage]:checked").val();
  
    if (IsStorageSupported()) {
        if (storage == "local") {
            for (key in window.localStorage) {
               var fullDescription = localStorage.getItem(key).split('^^^');
               createNotes(fullDescription[0], fullDescription[1]);
            }
        }
        else {
            for (key in window.sessionStorage) {
                var fullDescription = sessionStorage.getItem(key).split('^^^');
                createNotes(fullDescription[0], fullDescription[1]);
            }
        }
    }
}

Now let us see the code to save and refresh the sticky notes. Here's the code snippet. We are clearning the webstorage based upon it is local or session storage radio button option. Then we loop through all the table rows and keyname as input type with the id begins with 'title'. The first table row's id will be 'table-1' and so on. Then we get the title and description.

If both the title and description has a value in it, createNotes method gets called which will show the sticky notes in webpage. Then we check whether the webstorage (local or session) is supported , if so we will be saving the key value pairs in web storage by making a call to setItem of webstorage, passing in keyname as title and value as description.

function SaveAndRefreshNotes(){

    var storage = $("input:radio[name=storage]:checked").val();
    var tableRows = $('#newTasks tr');

    $('.sticky_notes li').remove();
   
    if (storage == "local")
        localStorage.clear();
    else
        sessionStorage.clear();

    $.each(tableRows, function (i) {
        var keyName = $(this).find('input[id^="title"]').attr("id");
        var title = $(this).find('input[id^="title"]').val();
        var description = $(this).find('input[id^="description"]').val();

        if (title != undefined && description != undefined) {
            createNotes(title, description);

            if (IsStorageSupported()) {
                description = title + '^^^' + description;
                try {
                    if (storage == "local")
                        localStorage.setItem(keyName, description);
                    else
                        sessionStorage.setItem(keyName, description);
                } catch (e) {
                    if (e == QUOTA_EXCEEDED_ERR)
                        alert('Local Storage Quota exceeded!');
                    if (e == SECURITY_ERR)
                        alert('Local storage security exception. Trying to access a data from a different domain');
                }
            }
        }
    });
}

/**
 * Creates the sticky notes and gives it a random colour.
 */
function createNotes(title, description){
    var header = '<h2>'+title+'</h2>';
    var desc = '<p>'+description+'</p>';
    
    var colours = new Array();
    colours[0] = 'green';
    colours[1] = 'blue';
    colours[2] = 'yellow';
    colours[3] = 'red';
    colours[4] = 'purple';
    colours[5] = 'orange';
        
    $('.sticky_notes').append('<li class="'+colours[randomFromTo(0,(colours.length - 1))]+'">'+header+description+'</li>');
}

function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

Here's how the sessionStorage will look like when the sticky notes are in sessionStorage.

StickyNotesSessionStorage

Now let us see how to remove a sticky notes. Note - While removing the sticking notes alone is not sufficient, we will have to remove the corresponding key value pairs from web storage. Here's the code snippet which does that.

When the user clicks on the cross mark to delete the sticky note, it will trigger calling deleteRow method. Based on the user selection for the web storage either local or session storage, we will be removing the item from the webstorage by calling removeItem passing in the keyname.

Apart from the webstorage logic, there is one interesting line thisButton.parent().parent().remove(); which removes the sticky note, here's what happens. The delete button is with in the table tr -> td. So calling the first parent() will return the table cell , i.e td element. Then calling it's parent() , will return the table row. Finally calling the remove() method will remove the table row and that's how the sticky note gets removed.

function deleteRow(thisButton){
    var storage = $("input:radio[name=storage]:checked").val();   
    var keyName = thisButton.id;
    if(IsStorageSupported())
    {
        if (storage == "local") {
            if (localStorage.getItem(keyName)) {
                localStorage.removeItem(keyName);
            }
        }
        else{
            if (sessionStorage.getItem(keyName)) {
                sessionStorage.removeItem(keyName);
            }
        }
    }
    thisButton.parent().parent().remove();
}​

Other tips and best practices

Let us see some tips and best practices of web storage.

1. Do no assume all browser supports localStorage. You must check whether the localstorage is supported by your browser and then you can store the items.

Bad Practice:

localStorage.setItem("user","Ranjan.D");

Better Practice:

// Always check whether localStorage is supported and then save.
if (window.localStorage) {
  localStorage.setItem("user","Ranjan.D");
}

Best Practice: In addition to the above check, handling localStroage exceptions

if (window.localStorage)
{
  try 
  {
      localStorage.setItem("user", "Ranjan.D");
  } 
  catch(e) 
  {
      if (e == QUOTA_EXCEEDED_ERR) {
        alert('Local Storage Quota exceeded!');
      }
      else {
         alert(e.message);
      }
  }
}

2. Do make use of string types were ever it is possible. The JSON.parse/JSON.stringify takes CPU time

Do not serialize unnecessarily.
Do not use excessive keys.
Do not use excessive gets/sets.
Do not block the UI.

We will seeing in detail each one of them and make sure you will be understood and not make some of the common mistakes.

3. Storing items as Primitive types vs strings

Primitive types are predefined data types. Example: int, bool, string, float etc

Example for primitive type:

localStorage.setItem("number", 1234);
localStorage.setItem("boolIndicator", true);

The above code is not so recommended, please use string types or convert them to string types as such as possible. We can store as below.

localStorage.setItem("number", "1234");
localStorage.setItem("boolIndicator", "true");

Try this test to know which one performs better - http://jsperf.com/passing-strings-vs-primitive-in-localstorage

Here's a good test to understand the performance of storing string vs JSON serialized types etc.
http://jsperf.com/json-stringify-or-string-for-localstorage

4. Don't just blindly use JSON serialization but instead take a step back and think about improving your code to use other alternate approaches if possible.

Here's an example:

var colors = ['red', 'green', 'blue','yellow'];
localStorage.setItem("colors", JSON.stringify(colors));
var fruits = JSON.parse(localStorage.getItem("colors"));

The above code can be improved as below. We can still store all the items as a comma separated strings and later while getting an item from the local storage, we can split them all by comma.

var colors = ['red', 'green', 'blue','yellow'];
localStorage.setItem("colors", colors.join(','));  // Save in local storage.
var colors = localStorage.getItem("colors").split(','); // Get an item from local storage.

Try this one to see the real performance of the above code blocks - http://jsperf.com/localstorage-serialization-json-vs-custom

5. Storing as multiple keys vs serializing and storing them as one object.

We need to be very careful and double check the performance and make sure what we are doing is correct. Because sometime it's good to store as multiple keys as opposed to JSON serialization, the other way it's not a good idea if there are too many multiple keys. We will be discussing these things here.

This also holds good to storing multiple keys for each items vs serializing and storing them. Here's an example:

localStorage.setItem("codeproject-user", JSON.stringify({'name': 'Ranjan.D', 'city': 'Waukegan', 'gender':'male'}));

The above code can be re-factored as below to hold items with multiple keys. Note – You will have to test and see whether it performance well. Believe me, unless you run some significant tests you can never arrive at the right approach. There are cases where you will notice storing data with too many keys perform worst than storing them as a serialized string.

localStorage.setItem("codeproject-user-name", "Ranjan.D");
localStorage.setItem("codeproject-user-city", "Waukegan");
localStorage.setItem("codeproject-user-gender", "male");

Here's the link to understand the effect of storing multiple keys vs serializing the object - http://jsperf.com/localstorage-1-object-vs-many-keys1

Wait, you can further improve the above code as below

localStorage.setItem("codeproject-user","Ranjan.D, Waukegan, male");

Here's the link to understand the effect of storing multiple keys vs a single key -
http://jsperf.com/localstorage-1-long-key-vs-multiple-short-keys

6. Do not block the UI by accessing local storage but instead defer until window onload.

Let us take an example to understand how to defer local storage data access.

Below is the code block which blocks the UI as we are trying to access the localstorage with in the script block.

<head>
<script>
  $('#img').attr('src', localStorage.getItem("Testcompany-HeaderLogo-Image"));
</script>
</head>

The above code block can be re-factored so that we do not block the UI.

<html>
<body>
….. 
</body>
<script>
window.onload = function() {
  $('#img').attr('src', localStorage.getItem("Testcompany-HeaderLogo-Image"));
};
</script>
</html>

Let us see some more examples where we can avoid the UI blocking.

Here's an example where we are setting an item on key down of text area.

$('textarea').keydown(function() {
  localStorage.setItem("User-Address", $(this).text());
});

The above code can be improved to set an item with a delay. The debounce function is a part of jquery which guarantees that the function is executed only a single time either at the very beginning of the series of call or at the function gets called at the very end.

$('textarea').keydown(function() {
  $.debounce(250, function() {
        localStorage.setItem("User-Address", $(this).text());
  });
});


7. When naming the key names, always do not use key names that collide; instead use a keyname which are highly descriptive prefixed with pseudo namespace.

Here's an example:

localStorage.setItem("name", "Ranjan.D");

The above code with the key name as 'name' can be improved to be a descriptive name as below.

localStorage.setItem("codeproject-author-name","Ranjan.D") 

It's hard to believe how the key name make a performance difference right ? Please have a look into this link (http://jsperf.com/use-descriptive-names) to understand more about the performance impact with and without the usage of descriptive names.


Performance profiling Javascript


If you want to know about the time taken to perform some operations, then it's a good idea to do some profiling to understand the performance.

You can make use of a small javascript library - http://remysharp.com/time.js to check for performance.
It has timing and reporting functions. We will have a look into both of these.

Here are the timing functions

time.start(label)
time.stop(label)
time.func([label], function)
time.event([label], element/s, event type)

Here are reporting functions that we can use it to report the timing.

time.report()
time.report(label)
time.setReportMethod(function)
time.setLineReportMethod(function)

More Info - http://remysharp.com/2007/04/20/performance-profiling-javascript/

Let us see how to use the time.js library and report the timing. Here's an example which demonstrates the usage.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> timer.js Test </title>

  <script src="http://remysharp.com/time.js" type="text/javascript" charset="utf-8"/>
  <script type="text/javascript">
  
      time.errors = true;

      window.onload = time.func('load', function(){
            document.getElementById('test1').onclick = function() {            
            time.start('dotest');
            for(var i=0; i<1000; i++)
            {
               localStorage.setItem("name", "Hello World!");  localStorage.removeItem("name"); 
            }
            time.stop('dotest');
            time.report();
            return false;
        };
      });

    </script>
</head>
<body>
    <div id="doc">
      <h1>Time Tests</h1>
      <a id="test1" href="#">Click here to test WebStorage setItem and removeItem for a 1000 iterations.</a>
    </div>
</body>
</html>

Here's how it works.

1. Start the timer with a label. It can be done with time.start('labelName')
2. Write some javascript code for which you are interested in checking for performance.
3. Stop the timer with the same label that you have defined in Step 1. It can be done with time.stop('labelName')
4. In the end, we report the time. It can be done with time.report() , this function will alert the time taken to execute the javascript code in step 2.

Bonus: Local Storage Helper Library

You must be wondering what is this library is all about. Yes it's a small custom helper library built to simplify the localStorage add, remove, clear and get all keys.

Let us see how it's being implemented. Here's the code snippet where we have defined variables which is being set with a value based on the function which is associated with them.

 // Check whether localStorage is supported by your current browser.
 var IsLocalStorageSupported = (function () {
        try {
            return "localStorage" in window && window["localStorage"] !== null;
        }
        catch (e) {
            return false;
        }
 } ());

 // Quick and (may be dirty) way of testing whether we have enough storage capacity
 var hasStorage = (function () {
        var dt = new Date;
        try {
            window.localStorage.setItem('Date', dt);
            window.localStorage.removeItem('Date');
            return true;
        }
        catch (e) {
            if (e == QUOTA_EXCEEDED_ERR)
                return false;
        }
 } ());

 // Quick and (may be dirty) way to check whether the string is a JSON
 function IsJson(str) {
        try {
            JSON.parse(str);
        } catch (e) {
            return false;
        }
        return true;
 }

Here's the code block which has a switch block, executes a block of code based on the action. Now we will see how the local storage add, remove, clear etc functions are implemented.

get action: On get action, we check whether local storage is supported. Then get the local storage item by keyname and then check if the data is JSON type, if so we will have to parse and return the data. if the data is not JSON, we can directly return.

set action: On set action, we check whether local storage is supported. Then check if the data is of object or xml type. If so we will have to use JSON.stringify to serialize the data and store them in local storage. if the data is not an object or xml, we can directly store them using localstorage.setItem, passing in the key name and value.

remove action: On remove actions, we check whether local storage is supported. Then remove the item from localStorage by keyname.

clear action: On clear action, we check whether local storage is supported. Then call the clear method of localStorage object to clear all the items with in it.

keys action: On keys action, we check whether local storage is supported. Iterate through the localStorage and gather all the keys.

// Actions : set, remove, removeAll, keys, get.
var LocalWebStorage = function (action, key, value) {

    switch (action) {
        case 'get':
            if (IsLocalStorageSupported) {
                var data = window.localStorage.getItem(key);
                if (IsJson(data)) {
                    data = JSON.parse(data);
                }
                return data;
            }
            break;

        case 'set':
            if (IsLocalStorageSupported) {
               if (hasStorage) {
                    var data = value;

                    // Check whether we should JSONify this item before storage.
                    var _dataType = typeof data;
                    if ((_dataType == 'object' || _dataType == 'xml') && hasStorage) {
                        data = JSON.stringify(data);
                    } else if (_dataType == 'function') {
                        throw 'Web storage can not store functions.';
                    }

                    window.localStorage.setItem(key, data);
                }
            }
            break;

        case 'remove':
            if (IsLocalStorageSupported) {
               return window.localStorage.removeItem(key);
            }
            break;

        case 'clear':
            if (IsLocalStorageSupported) {
                window.localStorage.clear();
            }
            break;

        case 'keys':
            if (IsLocalStorageSupported) {
                var keyArray = [];
                for (key in window.localStorage) {
                    keyArray.push(key);
                }
                return keyArray;
            }
            break;
    }
};

Now we will see the usage of this library. Here's the HTML code which makes use of the above mentioned local storage helper library.

You will notice the library has been included using script tag.

StoreName function is used to store the key, value pair in local storage. We need to pass in the action name as 'set' then name and value.

ClearLocalStorage function is used to clear the local storage. We just need to pass the action name as 'clear'.

RemoveKey function is called with keyname to remove an item from local storage for the specified keyname. We need to pass in the action name as 'remove'.

GetAllKeys function is used to gather all the keys within the local storage. We need to pass in the action name as 'get'.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Local storage testing</title>
  <script src="LocalStorageLibrary.js"></script>

  <script type="text/javascript">
      function StoreName(name, value) {
          LocalWebStorage("set", name, value);
          alert('Saved Successfully!');
      }

      function ClearLocalStorage() {
          LocalWebStorage("clear");
          alert('Local Storage Cleared Successfully!');
      }

      function RemoveKeyItem(name) {
          LocalWebStorage("remove", name);
          alert('Key Removed Successfully!');
      }

      function GetAllKeys() {
          var allKeys = LocalWebStorage("keys");
          var ul = document.getElementById("keyInfo");
          ul.innerHTML = ""

          for (var i = 0; i < allKeys.length; i++) {
              var li = document.createElement("li");
              li.appendChild(document.createTextNode(allKeys[i]));
              ul.appendChild(li)
          }
      }
  </script>

</head>
<body>
  <h1>Local Storage Library Testing.</h1>
 
  <div>
    <input type="text" id="name" placeholder="Key name" /><br /><br />

    <input type="text" id="value" placeholder="Value" /><br /><br />
        
    <button type="button" onclick="javascript:StoreName(document.getElementById('name').value, 
                                        document.getElementById('value').value)">Save/Update</button>

    <button type="button" onclick="javascript:ClearLocalStorage();">Clear Local Storage</button>

    <button type="button" onclick="javascript:RemoveKeyItem(document.getElementById('name').value);">Remove Key Item</button>

    <button type="button" onclick="javascript:GetAllKeys();">Keys count</button>

    <ul id="keyInfo">
    </ul>
  </div>  
</body>
</html>

LocalStorageLibraryUI

Points of Interest

Initially, I knew very little about webstorage. After research and working on this article, I realized the potential benefits of web storage (local and session). Almost all the modern web browsers do support for web storage. And we can really take advantage of web storage. Also the web storage with application caching is mainly used in building offline applications.

History

Version 1.0 - Initial version of article writing on Web Storage Wizardry.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ranjan.D
Web Developer
United States United States
Profile
 
Around 9 years of professional software development experience in analysis, design, development, testing and implementation of enterprise web applications for healthcare domain with good exposure to object-oriented design, software architectures, design patterns, test-driven development and agile practices.
 
In Brief
 
Analyse and create High Level , Detailed Design documents.
Use UML Modelling and create Use Cases , Class Diagram , Component Model , Deployment Diagram, Sequence Diagram in HLD.
 
Area of Working : Dedicated to Microsoft .NET Technologies
Experience with : C# , J2EE , J2ME, Windows Phone 8, Windows Store App
Proficient in: C# , XML , XHTML, XML, HTML5, Javascript, Jquery, CSS, SQL, LINQ, EF
 
Software Development
 
Database: Microsoft SQL Server, FoxPro
Development Frameworks: Microsoft .NET 1.1, 2.0, 3.5, 4.5
UI: Windows Forms, Windows Presentation Foundation, ASP.NET Web Forms and ASP.NET MVC3, MVC4
Coding: WinForm , Web Development, Windows Phone, WinRT Programming, WCF, WebAPI
 
Healthcare Domain Experience
 
CCD, CCR, QRDA, HIE, HL7 V3, Healthcare Interoperability
 
Others:
 
TTD, BDD
 
Education
 
B.E (Computer Science)
 
CodeProject Contest So Far:
 
1. Windows Azure Developer Contest - HealthReunion - A Windows Azure based healthcare product , link - http://www.codeproject.com/Articles/582535/HealthReunion-A-Windows-Azure-based-healthcare-pro
 
2. DnB Developer Contest - DNB Business Lookup and Analytics , link - http://www.codeproject.com/Articles/618344/DNB-Business-Lookup-and-Analytics
 
3. Intel Ultrabook Contest - Journey from development, code signing to publishing my App to Intel AppUp , link - http://www.codeproject.com/Articles/517482/Journey-from-development-code-signing-to-publishin
 
4. Intel App Innovation Contest 2013 - eHealthCare - http://www.codeproject.com/Articles/635815/eHealthCare
 
5. Grand Prize Winner of CodeProject HTML5 &CSS3 Article Content 2014

Comments and Discussions

 
GeneralWow. Nice article, Ranjan PinprofessionalJames Jensen5-May-14 11:29 
GeneralRe: Wow. Nice article, Ranjan PinmvpRanjan.D5-May-14 11:32 
GeneralGood Article Pinmembersubhash.H5-May-14 0:07 
GeneralRe: Good Article PinmvpRanjan.D5-May-14 0:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 5 May 2014
Article Copyright 2014 by Ranjan.D
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid