Data Storage - Introducing HTML5 - page 181

Now we return to the website, and whilst browsing, we decide
that we'd rather listen to Katy Perry and put a swift end to the
live radio stream from Smashie and Nicey. But herein lies the
problem: We've hit Play in the main window, but the pop-up
doesn't now reflect that we're listening to “I Kissed a Girl.”
Storage events will save this particular website.
We can also use the storage API to work out whether the pop-
up player is open already and avoid playing an audio stream
more than once. (You'd not want Katy Perry competing with
Smashie and Nicey at the same time—heavens no.)
From our main website, we can use the following code to track
the state of the pop-up and in the pop-up code (which will
follow), we listen for the event to say a new song has been
selected, and we update the display.
function popupPlayer() {
if (!localStorage.playerOpen) {
// coerced to “true” but when it closes,
// we'll remove the value.
localStorage.playerOpen = true;

NoTE If you're young and
not British there's a good
chance you've never heard of
Smashie and Nicey—feel free to
go looking for them on YouTube!

// open popup
}
}

function play(song) {
localStorage.currentlyPlaying = song.title;
// goes off and plays song in some quasi DRM,
¬ streaming way
}

function stop() {
// when the song stops, or the user stops the song
¬ manually,
// we want the popup player to update too
localStorage.removeItem('currentPlaying');
}
Now in the pop-up, along with the code that plays the audio
stream, we need to listen for the storage event that tells us the
currentPlaying value has changed, and then we can start that
funky new song: