Channels ▼
RSS

Open Source

HTML5 Web Storage


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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video