Peter Lubbers is Director of Documentation and Training and Brian Albers is Vice President of Development at Kaazing. They are also coauthors, with Frank Salim, of Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development.
HTML5 Web Storage is an API that makes it easy to persist data across web requests. Before the Web Storage API, remote web servers had to store any data that persisted by sending it back and forth from client to server. With the advent of the Web Storage API, however, developers can now store data directly in a browser for repeated access across requests, or to be retrieved long after you completely close the browser, thus greatly reducing network traffic. One more reason to use Web Storage is that this is one of few HTML5 APIs that is already supported in all browsers, including Internet Explorer 8.
To understand the Web Storage API, it is best to review its predecessor -- browser cookies -- which provide a built-in way of sending text values back and forth from server to client. Servers can use the values they put into these cookies to track user information across web pages. Cookie values are transmitted back and forth every time a user visits a domain. For example, cookies can be used to store local values into an application so that these values are available on subsequent page loads.
In many cases, the same results can be achieved without involving a network or remote server. This is where the HTML5 Web Storage API comes in. By using this simple API, developers can store values in easily retrievable JavaScript objects, which persist across page loads. By using either sessionStorage or localStorage, developers can choose to let values survive either across page loads in a single window or tab, or across browser restarts, respectively. Stored data is not transmitted across the network, and is easily accessed on return visits to a page. Furthermore, larger values -- as high as a few megabytes -- can be persisted using the HTML5 Web Storage API. This makes Web Storage suitable for document and file data that would quickly blow out the size limit of a cookie.
The Web Storage API is surprisingly simple to use in most use cases. In this article, we cover the simple storage and retrieval of values and then we will look at the more advanced aspects of the API, such as event notification about storage value changes.
Local versus Session Storage
HTML5 Web Storage defines two types of key-value storage types: sessionStorage and localStorage. The primary behavioral difference is how long the values persist, and how they are shared. Table 1 shows the differences between the two types of storage.
Since HTML5 Web Storage is very similar in function to cookies, it is not too surprising that the most advanced browsers are treating them in a similar manner. Values that are stored into localStorage or sessionStorage can be browsed similar to cookies in Chrome's Developer Tools, Safari's Web Inspector, and Opera Dragonfly. These interfaces also grant users the ability to remove storage values as desired, and easily see what values a given web site is recording while they visit the pages, as in Figure 1.
