HTML5 Web Storage API

The Web Storage API is surprisingly simple to use. i will start by covering simple storage and retrieval of values and then move on to the differences between session and local storage.

Setting and Retrieving Values

For now, i will focus on the session storage capability as you learn to set and retrieve simple values in a page. Setting a value can easily be done in a single statement, which we’ll initially write using the longhand notation:

window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);

There are three important points to notice from this storage access statement:

•  The object implementing the Web Storage API is attached to the window, so window.sessionStorage contains the functions you need to call.
• The function we are calling is setItem, which takes a key string and a value string. Although the formal Web Storage API supports passing in non string values, current browsers are limited in the value types they support.

•  This particular call will set into the session storage the string myFirstValue, which can later be retrieved by the key myFirstKey.

To retrieve the value, the long-hand notation involves making a call to the getItem function. For example, if we augmented our previous example with the following statement..

alert(window.sessionStorage.getItem(‘myFirstKey’));

the browser raises a JavaScript alert displaying the text myFirstValue. As you can see, setting and retrieving values from the Web Storage API is very straightforward.

That’s it for the basics. You now have all the knowledge you need to use session storage in your
application. However, you might be wondering what’s so special about this sessionStorage object. After
all, JavaScript allows you to set and get properties on nearly any object. The difference is in the scope.
What you may not have realized is that our example set and get calls do not need to occur in the same
web page. As long as pages are served from the same origin—the combination of scheme, host, and
port—then values set on sessionStorage can be retrieved from other pages using the same keys. This
also applies to subsequent loads of the same page. As a developer, you are probably used to the idea that
changes made in script will disappear whenever a page is reloaded. That is no longer true for values that
are set in the Web Storage API; they will continue to exist across page loads.

Local Versus Session Storage

Sometimes, an application needs values that persist beyond the life of a single tab or window or need to
be shared across multiple views. In these cases, it is more appropriate to use a different HTML5 Web
Storage implementation: localStorage. The good news is that you already know how to use
localStorage. The only programmatic difference between sessionStorage and localStorage is the name
by which each is accessed—through the sessionStorage and localStorage objects, respectively. The
primary behavioral differences are how long the values persist and how they are shared.

Posted in: HTML5