HTML5: from documents to applications - HTML5 in Action - page 33

1.3.6. Web storage
For many years, web applications have used cookies to store small chunks of data in the
client that persist for the session or between multiple sessions. This is the technology un-
derlying web authentication systems—they store on the client a cookie that holds some
form of identifier used to tell the application who's logged in. Cookies present a number of
issues, making them less useful for storing all but the smallest chunks of data.
The first issue is that most browsers limit the size of cookies to 4 kilobytes, and the number
of cookies stored per domain to 20. After reaching these limits, the browser will start dis-
carding older cookies to make way for the newer ones, which means there's no guaran-
tee it'll keep them. Another issue is that when an application uses cookies, those cookies
are sent in every HTTP request made for the session, adding overhead to each and every
transaction. This might not be an issue if you're using one or two cookies, but what if
you use several? And consider that the cookies will be sent along with every HTTP re-
quest—slowing down every page load and AJAX request your application makes.
The Web Storage DOM API provides a JavaScript alternative to cookies for web applica-
tions. It defines two interfaces:
• sessionStorage —Client-side data storage that persists for the length of the
current session only
• localStorage —Client-side data storage that persists for multiple sessions
These APIs expose methods that allow developers to store simple key/value pair data in a
client-side store. The data items stored using these interfaces are accessible only by pages
in the same domain. In chapter 5 you'll build the application shown in figure 1.13 , which
stores user settings and preferences in local storage.