Peter Lubbers - Pro HTML 5 Programming

230
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
Listing 9-10. Displaying Stored Racer Data
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]);
}
This is an important section of code. Here, we query the session for its length—in other words, the
number of keys the storage contains. Then, we grab each key using storage.key() and store it into the
currRacer variable, later using that variable to reference the key’s corresponding value with
storage[currRacer]. Together, the key and its value represent a racer and that racer’s distance, which
were stored on a visit to a previous page.
Once we have a previously stored racer name and distance, we display them using the
displayRacerLocation() function. This all happens very quickly on page load, causing the page to
instantaneously fill its leader board with previously transmitted values.
■ Note Our sample application relies on being the only application that stores values into the session storage
area. If your application needs to share the storage object with other data, you will need to use a more nuanced
key strategy than simply storing the keys at root level. We’ll look at another storage strategy in the “Practical
Extras” section.
Our last piece of load behavior is to hook up the page to the racer broadcast server using a simple
WebSocket, as shown in Listing 9-11.
Listing 9-11. Connecting to the WebSocket Broadcast Service
// test to make sure that WebSocket is supported
if (window.WebSocket) {
}
// the location where our broadcast WebSocket server is located
url = "ws://websockets.org:7999/broadcast";
socket = new WebSocket(url);
socket.onopen = function() {
document.getElementById("leaderboardStatus").innerHTML = "Leaderboard:�
Connected!";
}
socket.onmessage = function(e) {
dataReturned(e.data);
}