Associated Technologies - HTML5 Mastery: Semantics, Standards, and Styling - page 355

line. Such offline functionality would be tremendously useful for improving the latency
of the application, since the user's data would not need to be sent back and forth over
the network as frequently, and it would also help in situations where connectivity may
be spotty, such as in a mobile environment.
Web storage
Cookies have long been the method for storing data on the client-side browser. A prob-
lem with cookies has been that they are small, allowing only 4 kilobytes of storage each,
which is minuscule by the standard of today's data-rich web pages/applications. In re-
sponse to this, a new generation of client-side storage solutions have emerged. The most
stable solution, and the one that can be seen as a replacement for cookies, is the Web St-
orage API, 2 which allows up to 5 megabytes of storage. Web storage is actually broken
into two options, the localStorage object and sessionStorage object, both of
which are properties of the window object. The difference between the two is that data
stored in localStorage is persistent, while data stored in sessionStorage is
lost when the browser session ends (such as when quitting the browser), but otherwise
they are used in the same manner. Each is just a series of key/value pairs, so a key is set
with some data, and then the key is used to retrieve the data later.
Using web storage
Using web storage is really quite straightforward. To add data to the storage, use either
of the following syntaxes:
window.localStorage.setItem("key","value");
window.localStorage["key"] = “value";
In this code, the “key” and “value” can be any string of text. To retrieve the data from
the storage, use either of the following:
var val = window.localStorage.getItem("key");
var val = window.localStorage["key"];
To remove data, either remove a specific key or clear the whole storage:
window.localStorage.removeItem("key");
window.localStorage.clear();
WEB STORAGE EXAMPLE