HTML and CSS Reference
In-Depth Information
Storage Events
What makes Web Storage particularly unique is that it also
comes with events that notify you of updates to the data store.
The first thing to know is that the storage event doesn't fire on
the window storing the actual data. It will only fire on the other
windows whose storage is affected.
This means that storage events only fire for
sessionStorage
on
iframes on the same origin and windows that have been opened
using the pop-up technique of
window.open()
, as these all share
the same session. Storage events for
localStorage
fire on all
windows open on the same origin, and we'll see an example of
how that could be useful.
When the event fires, it also contains all the information about the
data change as you can see from the storage event object below:
StorageEvent {
readonly DOMString key;
readonly any oldValue;
readonly any newValue;
readonly DOMString url;
readonly Storage storageArea;
};
Remember that although the specification says it supports “any”
value, it doesn't. All the browsers (currently) coerce these values
to strings, so you can be sure the
oldValue
and
newValue
will
be strings!
The
storageArea
points to either
localStorage
or
sessionStorage
,
obviously depending on where the data was stored.
Syncing windows using storage events
Let's say we're building a radio station's website and the station
had a pop-up player for the radio—but this pop-up only shows
me the current song and some controls. I'm able to select music
from the main window the pop-up came from (or perhaps any
other window that's on this radio website, as we'll see shortly).
I'm sure you've used these before when you want to listen to
live music, and it's a decent way to keep the player window
open the whole time.
