Putting it All Together

As applications grow more complex, it becomes increasingly important to manage as much data as possible without server interaction. Keeping data local to the client reduces network traffic and increases responsiveness by fetching data from a local machine instead of a remote location.

One common problem developers grapple with is how to manage data as users move from page to page within an application. Traditionally, web applications achieve this by storing data on a server and moving it back and forth while the user navigates pages. Alternatively, web application may attempt to keep the user in a single page and update everything dynamically. However, users are prone to wander, and getting data back into the display quickly when a user returns to your application's page is a great way to enhance the user experience.

The following example shows a routine that will be called whenever data is returned from a data source. For example, let's say you want to show where users are located on every page of your site. This data may initially be retrieved using an HTML5 Geolocation API call or it might be retrieved from another server using a WebSocket connection. Either way, the coordinates that are retrieved can be stored in storage for fast retrieval when users move from page to page.

    
function dataReturned(locationData) {
  // break the data into ID, and location coordinates
  var allData = locationData.split(";");
  var userID   = allData[1];
  var locationCoordinates  = allData[2];

  // store the incoming user name and distance in storage
  window.sessionStorage[userId] = locationCoordinates;

  // display the new user data in the page
  displayUserLocation(userId, locationCoordinates);
}

In this example, we use the sessionStorage object on the window to store the user's current location. At the end of the function, we call a displayUserLocation() routine to make sure that this most recent location update is displayed visually in the current page (how that is done is outside the scope of this article, but you can use various map APIs, for example). As the user navigates from page to page on the web site, the location data can quickly be retrieved from storage. The following load routine fires whenever users access any web page on the site.

function loadDemo() {
  // make sure the browser supports sessionStorage
  if (typeof(window.sessionStorage) === "undefined") {
    document.getElementById("warnings").innerHTML = "Your browser does not 
              support HTML5 Web Storage";
    return;
  }
  var storage = window.sessionStorage;

  // Retrieve the latest location
  for (var i=0; i < storage.length; i++) {
    var currUser = storage.key(i);
    displayUserLocation(userId, locationCoordinates);
  }
}

On page load, we use storage to retrieve user location results, which have already been served to this or other pages of our web site. The previously saved values will "follow" the user during navigation, as long as the user does not close the window, tab, or browser, thus clearing out the session storage. Once we have a previously stored user name and location, we display them using the displayUserLocation() function shown earlier. This all happens very quickly on page load, causing the page to show the user's position instantaneously, using the previously transmitted values.

Summary

The benefits you gain from using HTML5 Web Storage are:

• Network traffic is reduced. User information is stored locally in the browser. Once it arrives, it sticks around for every page load, rather than using cookies or server requests to re-fetch it.
• Immediate display of values. The browser pages themselves can be cached rather than loading them from the network because the dynamic parts of the page are local data. This data is rapidly displayed without any network load time.
• Transient storage. Data that is not very useful for a longer period of time can be stored in session storage area, meaning it is discarded when the window or tab is closed and no longer consumes any space.