Store Unique Data Client-Side In Each Tab Using HTML5 and JQuery

Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view.

The Problem: Moving to ASP.net MVC 4 from ASP.net (aka WebForms) wasn’t as easy as most books would make you think.  The biggest reason?  The viewstate does not exist in ASP.net MVC.  The viewstate was the magic code ASP managed that kept track of data stored/entered on a page and submitted it back to the server with each post-back.  It was wasteful, but it was so. dang. easy.

But I don’t want to get bogged down with details on MVC 4 implementation or whine about the good old days of viewstate because I found a work-around in MVC.

The Solution: HTML 5 offers two forms of local storage that offers a key – value relationship.  The value can only be stored as a string.  This may seem like a crappy solution because you obviously want to store complex data objects like the Models you’ve painstakingly designed in your MVC project, and that’s Ok.  You can.  I’ll describe that process later.

The first type of local storage offered by HTML 5 is conveniently called ‘LocalStorage’ and is about as permanent as cookies.  Items stored in LocalStorage can be accessed by other tabs and instances of the same web browser.  But that’s not helpful to our problem.  We want to ‘cache’ a unique version of a complex object (like ones defined under Models) per tab of the same browser instance.

The second type of local storage offered by HTML 5 is ‘SessionStorage’.  Session storage is unique per tab and cleared out when the tab is closed.  This is where you’ll want to store your data.  You will use JavaScript to save data to SessionStorage and use JavaScript to retrieve it.  If you’re using MVC 4, you’ll undoubtedly want to store objects from the server to SessionStorage and that is possible, but you may need to tweak how you develop your pages.  Why?  Because a function from a controller on the server can’t call a function in JavaScript.  It can only go from JavaScript to the Controller and back.

Here is a breakdown of how to pull a complex object from the server and store it locally in SessionStorage:

• A JavaScript function is called to retrieve a complex object from my controller.  Note: I put these two functions on my layout page.  JSON.stringify requires an external script be loaded.  The filename is json2.js.  It’s pretty easy to find on Google:

<script type=”text/javascript”>

function SetSessionStorage(variable, payload) {

         sessionStorage.setItem(variable, JSON.stringify(payload));

          }

function GetSessionStorage(variable) {

var payload = sessionStorage.getItem(variable);

if (payload == “undefined”) {

return null;

         }

else {

return payload;

                  }

}

</script>

• The controller responds with the object but returns it to the JavaScript function with the JSon() formatter.
• The JavaScript function receives the data from the server and calls the SetSessionStorage command with the Stringify function.  Or you can use the prebuilt function above ‘SetSessionStorage’.

Here is a breakdown of how to retrieve a complex object from SessionStorage:

• A JavaScript function is called and it retrieves the stored SessionStorage object.  Use the ‘GetSessionStorage’ function above.
• The JavaScript function sends the object as a string to the server.
• The server receives the string and translates it to a known Model.  This is the fun part.
  • First, don’t actually try to store a date in any of your objects.  Just save it as text and parse it out using DateTime.Parse(string) later.
  • You’ll need to include this: using System.Web.Script.Serialization;

MyModel model = Newtonsoft.Json.JsonConvert.DeserializeObject<MyModel>(obj); // obj is a string

• The server does whatever it does with that information and makes changes to the object.
• The object is submitted back to the calling JavaScript function with the JSon() formatter.
• The JavaScript function receives the data from the server and overwrites the value currently stored in SessionStorage.  Use the ‘SetSessionStorage’ function above.

It’s not as easy as the viewstate, but it is much more efficient.  And it’s compatible with all of the newest browsers as each major browser gladly supported local storage in HTML 5.  There is a 5-10MB limit of storage space so use it wisely.  I’ve tested this functionality in the following browsers with success:

• IE 10.0.9200
• Firefox 24
• Safari 5.1.7
• Chrome 30.0.1599.101 m
• iOS Safari (iPhone 5)

Capt. Rochefort (Later Gator)

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.