Understanding Web Storage in HTML 5 Part II

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In the previous blog post we looked at HTML5 Web Storage features. Mainly we focused on function for adding items to localStorage. And briefly we used couple of other functions to read the values back from the localStorage.

  • setItem(key,value)
  • getItem(key)
  • length()
  • key(i)

We used above functions to add item to the localStorage, find the storage length, and find the item by it's key.

Understanding Web Storage in HTML 5 Part I

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In the blog post we will be looking at another interesting feature of HTML5, which is a Web Storage. This feature allows our web applications to store data onto client's browsers. Prior to HTML5 we have used cookies to store such information on client's machine.

The problem with cookies is that you have a very limited space to store all your important data and the data you store in cookies will be always passed back and forth as part of request and response of your pages. This definitely slows down your pages in case you store lot of information in the cookies. Also it is not very secure since your data is exposed during the request and response.

The HTML5 Web Storage feature is trying to address the exact same issue with the introduction to two new APIs for storing data on clients' machines. These two APIs are,

  • localStorage - Stores data across user sessions until user clears his history and deletes data explicitly
  • sessionStorage - Stores data for only that particular session of the user. As soon as the browser is closed the data will be destroyed.

Benefits of using these new Web Storage APIs

  • Data you store using these APIs are not being send back and forth as part of request/response.
  • You can store a lot more information in these storage as compare to what you were able to store into cookies.
  • Storing and retrieving your data from these storage is much more simpler.

So without any further discussion, let's dive into creating a sample. Again for the demonstration of this sample I will be using Visual Studio 2012. You do not have to use this tool at all if you don't want to since we are not planning to use any Server side technologies here.

In my previous post on HTML5 Geolocation, we created an empty Asp .Net web applications. For this sample we will be working with the same sample.

Creating the Application/Page

Let's start by adding a new HTML page in our existing solution. In case you do not have that project, you can download the one that is attached with this blog post. Let's name our page as localstorage.html. Go ahead and add following JavaScript function. The function basically checks if the localStorage is supported or not.

Understanding Html5 GeoLocation API-Part II

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In the previous blog post we looked at basic GeoLocation API. If you are new to HTML5, refer my previous blog post on HTML5 GeoLocation before continuing with this blog post.

In previous post we saw how to access user's current location just by their browser. We saw three basic functions are available to us as part of GeoLocation API. All these three functions can be found in geolocation *object attribute of the *Navigator object.

  • getCurrentPosition
  • watchPosition
  • clearWatch

From above three we explored getCurrentPosition and saw how we can get users' location, specifically latitude, longitude, accuracy and bunch of other information. The next step once you have the location of the user is track where your users is going !!

Well not exactly, but sometimes you do want to keep track of users' location data, probably for your smart phone application to draw the path on the map or to see how much distance your user traveled. For these purposes, you constantly need to read user's location.

watchPosition and clearWatch functions will provide us the exact same features. Let's enhance on our previously created sample to test these two functions. First let's go ahead and modify our JavaScript to watch user's position. The function will return the ID of the watch you just added. You need to keep this ID around because in future if user does not want you to track him/her you will need this ID to clear the watch. As you might have guessed already, by calling clearWatch function passing this watchID.

Understanding Html5 GeoLocation API Part I

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

When building web applications, knowing users' current location has a lot of benefits.Following are some examples of real-time use cases of such API.

  • A news channel website knowing the users current location can give higher preferences to the local news near to that user.
  • A movie theater website can leverage users current location and list nearby movies being played.
  • A taxi service can get your location and provided a faster taxi services.

Above are just some of many real time examples, where geolocation API can come really handy and greatly improve user experience.With introduction to HTML5 geolocation API, it is very easy to get users current approximate location. In this blog post we will quickly go through the basics of the new geolocation API.

So without any further discussion let's jump right into the discussion of the actual API. For this sample I will be using Visual Studio as my IDE, however it is not necessary at all for you guys to use it if you do not want to.

Creating Asp .Net Empty Web Application

Let us start by creating a new empty ASP.net Web application using Visual Studio 2012.

Strongly Typed Data Controls In Asp .Net 4.5

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

One of the cool feature of Asp .Net 4.5 is Strongly typed data controls. In past when we worked with Asp .Net applications we used controls like GridView, Repeater etc. When defining the ItemTemplate for these controls we had to use the 'not very intuitive' Embedded code block technique. And to add to that we had to pass the property names as blind strings hoping that when objects are bound to these controls they will have relevant properties.

Following is an example of one such binding.