Using HTML5 Local Storage in ASP.NET Applications

I recently delivered a Zeollar session on  Using HTML5 Local Storage in ASP.NET Applications

Following it up with a blog post on the contents, since a few mentioned that the code was not better aligned/readable.

Local Storage and Offline Web Applications are 2 promising features of HTML5 going around the web apart from the (already tired of?) Videos.  Local Storage (persistent storage) is not entirely new since we had cookies ever since sliced bread (or seems to be so).  But, the limitation of 4KB on cookies is a tiring boredom and often web developers wanted more information to the stored on the local machine so that it is available for faster access and also much better “remember me” experience.

Local Storage is enabled for IE8 and great versions hence even if someone is on Windows XP, it should work just fine.   While, I am writing on this, am entirely new and just exploring some of the capabilities, so if there are better ways to implement, feel free to share in the comments.

To begin with, we need a few HTML input types, as follows:-

<input type="text" name="txtName" id="txtName" />

       <input type="button" value="Save" onclick="add()" />
       <input type="button" value="Get" onclick="get()" />

Apparently, its basically a bunch of buttons and a textbox to enter value.

The “add()” and “get()” needs to be fired up.

function add() {

       window.localStorage.setItem("name", document.getElementById('txtName').value);
   }

Notice that with simply window.localStorage.setItem, we could store a key value pair.  Here, am picking up the value from the TextBox.

Next, is to try and retrieve the value from the local storage

function get() {
        alert(window.localStorage.getItem("name"));
    }

Again, with getItem, we could retrieve the value from the local storage.

The local storage in HTML5 specification allows upto 10MB size of storage, which is pretty decent.  We could simply store key/value pairs.  If we need to store complex types such as properties, then it’s a little more work to serialize/deserialize using JSon.   Lets modify the add() and get() functions

<script type="text/javascript">
    var localstore = new LocalStorage();
   
    function add() {
       
        var products = [
            { name: "Rice", price: 100 },
            { name: "Wheat", price: 200 }
        ];
        localstore.set("products", products);
    }

    function get() {
        var products = localstore.get("products");
        for (var i = 0; i < products.length; i++) {
            alert('The price of ' + products[i].name + ' is ' + products[i].price);
           
        }
    }

    function LocalStorage() {
        this.get = function (name) {
            return JSON.parse(window.localStorage.getItem(name));
        };

        this.set = function (name, value) {
            window.localStorage.setItem(name, JSON.stringify(value));
        };
        this.clear = function () {
            window.localStorage.clear();
        };
    }
</script>

As you can see, we have repurposed the add() and get() to use the Storage() function that does few more things than basic string storage.

Finally, to use HTML5 local storage in a much advanced scenario, added a content-editable HTML unordered list.   When we add the contenteditable=”true” we can start typing our list as if it were a Text Area.  But the value wouldn’t be retained when we come back to the page since we need to persist the value.

<ul  id="favMovies" contenteditable="true">
<li></li>


</ul>

 

After adding this, with jQuery, identify the ul to store the values into local storage and thereafter retrieve them on page load.  (I got this idea from a video, but unable to get the link to post here.  So all credit to the author)

$(function () {

    var favMovies = document.getElementById('favMovies');

    $(favMovies).blur(function () {

        localStorage.setItem('favMovies', this.innerHTML);
    });


    //page load
    if (localStorage.getItem('favMovies')) {

        favMovies.innerHTML = localStorage.getItem('favMovies');

    }

});


I have uploaded the sample to skydrive https://skydrive.live.com/redir.aspx?cid=069f94a102eff49a&resid=69F94A102EFF49A!783

Also, the recorded session is available at http://zeollar.cloudapp.net/Session/260

Cheers !!!

Print | posted on Monday, August 29, 2011 5:26 PM

Comments on this post

# re: Using HTML5 Local Storage in ASP.NET Applications

Requesting Gravatar...
Thanks, Good one. Got some tips on how to start with the basic coding.

Left by Manjunath on Sep 13, 2011 2:14 PM

# re: Using HTML5 Local Storage in ASP.NET Applications

Requesting Gravatar...
thanks for sharing localstorage feature of html5
Left by Vaibhav Parmar on Nov 03, 2011 1:03 PM

# re: Using HTML5 Local Storage in ASP.NET Applications

Requesting Gravatar...
Pretty decent indeed. Some of them gives us a lesser store capacity. 10 MB is more than enough but if it can be improved, then the better. - Kyle Thomas Glasser
Left by Kyle Thomas Glasser on Feb 14, 2012 12:33 AM

# re: Using HTML5 Local Storage in ASP.NET Applications

Requesting Gravatar...
You're very knowledgeable and full of creative thinking. My task will be perfectly prepared. I am glad that I have your amazing way of thinking. Really consistential material. Now informative and useful it is for me to understand and easy to implement, to find the concept. I like your review. It will surely help me to write thesis http://papersmart.net/thesis.html does.
Left by AlanWake on Jun 19, 2012 11:46 PM

# re: Using HTML5 Local Storage in ASP.NET Applications

Requesting Gravatar...
Hi! Very good tips, waiting for new one!) Try to post a tips about bestsessays.biz essay writing .

Good Luck!
Left by Carl Chaney on May 22, 2015 2:27 AM

# re: Using HTML5 Local Storage in ASP.NET Applications

Requesting Gravatar...
At the very 1st, I’d favor to state thanks to you for this enlightening article. Second, I'd prefer to wonder wherever I can learn a lot more info concerning your post. I arrived right here via Bing and can't discover any associated web websites connected to this matter. How do I sign for your web blog? I had prefer to stick to your updates as they arrive along! I'd a query to interrogate but I forgot what it absolutely was... anyways, thank you very much.
Left by <a href="http://awriter.org">onl on Sep 25, 2015 7:31 PM

Your comment:

 (will show your gravatar)