Peter Lubbers - Pro HTML 5 Programming

228
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
}
// update the row text with the new values
var currentDistance = distance(incomingLat, incomingLong, finishLat, finishLong);
// store the incoming user name and distance in storage
window.sessionStorage[incomingId] = currentDistance;
// display the new user data in the page
displayRacerLocation(incomingId, currentDistance);
This function takes a string in the format described previously, a semicolon-separated message
containing the name, latitude, and longitude of a racer. Our first step is to split it into its component
parts using the JavaScript split() routine to produce the incomingId, incomingLat, and incomingLong,
respectively.
Next, it passes the racer’s latitude and longitude, as well as the latitude and longitude of the finish
line, to the distance utility method we defined earlier, storing the resulting distance in the
currentDistance variable.
Now that we actually have some data worth storing, we can look at the call which exercises HTML5
Web Storage.
// store the incoming user name and distance in storage
window.sessionStorage[incomingId] = currentDistance;
In this line, we use the sessionStorage object on the window to store the current distance of the
racer from the finish line as a value under the name and ID of the racer. In other words, we will set a
value on the session storage with the key being the racer’s name and the value being that racer’s
distance from the finish. As you will see momentarily, this data will be retrieved from storage as the user
navigates from page to page on the web site. At the end of the function, we call the displayLocation()
routine we previously defined to make sure that this most recent location update is displayed visually in
the current page.
Now, on to our final function in our storage example—the load routine shown in Listing 9-8 that
fires whenever visitors access the web page.
Listing 9-8. Initial Page Load Routine
// when the page loads, make a socket connection to the race broadcast server
function loadDemo() {
// make sure the browser supports sessionStorage
if (typeof(window.sessionStorage) === "undefined") {
document.getElementById("leaderboardStatus").innerHTML = "Your browser does��
not support HTML5 Web Storage";
return;
}
var storage = window.sessionStorage;
// for each key in the storage database, display a new racer
// location in the page
for (var i=0; i < storage.length; i++) {
var currRacer = storage.key(i);
displayRacerLocation(currRacer, storage[currRacer]);
}