Channels ▼
RSS

Parallel

HTML5 Web Storage


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.

[Click image to view at full size]
Table 1

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.

[Click image to view at full size]
Figure 1


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video