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 !!!