BlueLemonCode.Com

Yet Another Tech Blog

Features of HTML5 - LocalStorage

Introduction

One of the many features of HTML5 which attracted attention of web developers around the world was LocalStorage. It has simple and limited methods to play with but it could be trmendeously useful in some scenarios where it is essential for web pages to store data locally.

Background

I worked on a big enterprise asp.net application which required to provide ability to it's users to work while there is no connection available with website. The application is meant for intranet and it is used for filling lot of information using boring form. Users preferred to do this after returning back to home. But that's where users don't have intranet available.

For this situation, we had built separate winform based application which would provide all the functionality simillar to web application. Localstorage could come handy in such scenarios.

Article Body

Now a days almost all new browsers support Localstorage. however, the old browsers are going to be there for quite some time. so, its better that we dont build something which is totally depend on the localstorage feature.

localStorage is persistent storage which is stored for every web site (domain) such that no other web site could read it. The localStorage also persists even after you close the browser window or shut down the machine. However, this is just not replacement of good old cookies.

Cookies are sent and received over every request and response sent and received by browser. The data that can be stored in cookies is also very limited (just 4KB). Whereas localStorage is truly a storage mechanism on client side; it is not sent over with request object;

HTML5 LocalStorage allows storing the data in string format locally in web browser. It has following main methods

  • localStorage.setItem(kayName, value)
  • localStorage.getItem(kayName)
  • localStorage.removeItem(kayName)
  • localStorage.clear()

Lets create a sample project and see each of these method's usage. Following are few buttons and textboxes created to demonstrate basic localstorage functions.

<div>
        Enter value to store in localStorage 
        <asp:TextBox ID="txtEnterLocal" runat="server"></asp:TextBox>
        <asp:Button ID="btnSave" runat="server" OnClientClick="return AddLocal()" Text="Save locally" />
    </div>
    <div>
        Retrived value from localStorage     
        <asp:TextBox ID="txtGetLocal" runat="server"></asp:TextBox>
        <asp:Button ID="btnGet" runat="server" OnClientClick="return GetLocal()" Text="Get from local" />
    </div>
    <br />
    <asp:Button ID="btnGetKeys" runat="server" OnClientClick="return GetKeys()" Text="Get list of localStorage keys" />
    <br />
    <div id="localStoraeKeys">
    </div>
    <br />
    <asp:Button ID="btnRemovekey" runat="server" OnClientClick="return GetKeys()" Text="Remove key - value" />
    <br />
    <asp:Button ID="btnClearKeys" runat="server" OnClientClick="return GetKeys()" Text="Clear all keys" />

The AddLocal method is called to save entered textbox value into localstorage. Below is the Javascript function used for that

function AddLocal() {
       if (document.getElementById("txtEnterLocal").value != "") {
           window.localStorage.setItem("value", document.getElementById("txtEnterLocal").value);
       }
       return false;
   }

The first parameter to the setItem is the key name and the second parameter is the value to be stored. This will store value entered in textbox in localstorage with key name being "value".

The GetLocal function below reads the value from localstorage. It just passes the key name to the getItem function of localstorage which in turn returns the original value stored.

Note: If setItem function is called again by passing same key name again and different value then old value of that kay will be overwriten with new value.

function GetLocal() {
        if (window.localStorage.getItem("name") != "") {
            document.getElementById("txtGetLocal").value = window.localStorage.getItem("name");
        }
        return false;
    }

As the name suggests, removeItem function is meant for removing any particular item from localStorage while clear method removes all the items from localStorage memory.

function RemoveKey(keyName) {
       localStorage.removeItem(keyName);
   }


   function ClearKey(keyName) {
       localStorage.clear();
   }

You can copy all the aspx and Javascript code above, paste it in your project and see all setps in action.

More about localStorage

If you are planning to use localStorage in your project then below are few points you should know

  • Maximum size allowed to store in localStorage per domain is 5MB (This may vary for different browsers and versions). Although HTML5 specification advise that max limit should be 5MB, it depends on browser vendors.
  • Before making use of localStorage feature, check if localStorage is supported in current browser or not by following check                      if(window['localStorage']) 

 

Application of localStorage

There could be many real world applications. As i explained earlier, applications can be built with limited functionality in offline mode and the offline data could be synch when user connects back again.

The possibilities are endless. However, the support for localStorage has to be consistent across all browsers also, some enhancements in the feature. I might be too optimistic... but, may be in time to come, the decent localStorage or localDatabase like features will change the way we look at the web programming and web usability.

I know there are still some points which i missed on about localStorage. I would like to hear from my visitors :)

Thanks for reading. happy coding!