Peter Lubbers - Pro HTML 5 Programming

}
// test to make sure that Web Sockets are supported
if (window.WebSocket) {
}
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
// 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);
}
This is a longer function than the others, and there is a lot going on. Let’s take it step by step. First,
as shown in Listing 9-9, we do a basic error check to make sure that the browser viewing the page
supports sessionStorage by checking for its presence on the window object. If sessionStorage is not
accessible, we simply update the leaderboardStatus area to indicate as much, and the return out of the
loading routine. We won’t be attempting to work around lack of browser storage in this example.
Listing 9-9. Checking for Browser Support
// make sure the browser supports sessionStorage
if (typeof(window.sessionStorage) === "undefined") {
document.getElementById("leaderboardStatus").innerHTML = "Your browser does
not support HTML5 Web Storage";
return;
}
■ Note It is possible to rework this demonstration to simply forgo any persistence of data between page
navigations and start each page load with a clean leader board if storage is not supported. However, our goal here
is to show how storage optimizes the experience for both the user and the network.
The next thing we do on page load is to use the storage to retrieve any racer distance results that
have already been served to this or other pages of our website. Recall that we are running an identical
block of script code on every one of our site pages, so that the leader board follows the users as they
browses around various locations. As such, the leader board may already have stored values into storage
from other pages that will be retrieved and displayed here directly on load as shown in Listing 9-10. 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.
229