Data Storage - Introducing HTML5 - page 172

All data is tied to document origins which is made up of the pro-
tocol, plus host, plus port number (which defaults to port 80)—
which means that data on http://remysharp.com cannot access
data on the secure version on https://remysharp.com .
In either case, the browser will throw an exception error if the
API isn't able to write the data, but I'll focus on smaller applica-
tions where the data stored is around the 100 KB mark.

Web Storage

In a nutshell, the Web Storage API is cookies on steroids (but do
refer to my caveat previously if this upsets you). One key advan-
tage of this API is that it differentiates between session data and
long-term data. If you set a “session” cookie (that is, one without
expiry data), that data item is available in all windows that have
access to that domain until the browser is shut down. Web Stor-
age, on the other hand, allows you to define a sessionStorage
that really only refers to the particular window/tab the user is
currently in. Once it's closed, the data disappears, rather than
sticking around until the entire browser is closed.
The storage API offers two types of storage: sessionStorage
and localStorage .
If you create data in sessionStorage , it's available only to that
window until the window is closed (when the session has
ended). If you opened another window on the same domain, it
wouldn't have access to that session data. This is useful to avoid
having data from a session “leak” across different windows.
localStorage data is tied to a particular origin and spans all
windows that are open on that domain. If you set some data
on local storage it immediately becomes available on any other
window on the same domain. It also remains available until it's
explicitly deleted either by the web application or by the user.
Otherwise, you can close your browser, reboot your machine,
come back to it days later, and the data will still be there. Here
you have persistent data without the hassle of cookies, which
require you to reset the expiry again and again.
What makes Web Storage much, much better than cookies is
not only the API but also the event system that comes with it.
I'll talk about events toward the end of this section.

NoTE When I'm referring
to windows having access,
I'm referring to the window
object. This is usually bound to
a particular origin (protocol +
host + port) and applies to
browser windows and tabs. Just
in case you were confused!

NoTE Cookies on ste-
roids versus regular cook-
ies: IE6 supports only 20
cookies per domain and a maxi-
mum size of 4 KB per cookie.
Web Storage has no maximum
number of items that can be
stored per domain, and it limits
the aggregate size to upwards
of 5 MB.