Network and location APIs - HTML5 and CSS3 - page 227

added to the list item as entries are created. The key is created in the
add_item()

method and passed in to both add_listitem() and

add_storageitem() :

function add_item() {
var new_item = document.getElementById('new_item');
var key = new Date();
add_listitem(key.getTime(), new_item.value);
add_storageitem(key.getTime(), new_item.value);
new_item.value = '';
}

Finally, a user may want to delete everything in local storage rather
than individual items one at a time. This is easy using the clear()
method:

window.localStorage.clear();

You can look at the finished listing in ch06/offline-example/local-
storage-3.html.

Session storage
So far, the example has used local storage, but the section introduction
also mentioned session storage. Local storage and session storage have
exactly the same API : if you go back through the example and replace
every instance of localStorage with sessionStorage , it will still work.
Here's the sessionStorage version of the add and remove functions:

function add_storageitem(key, item) {
window.sessionStorage.setItem(key, item);
}
function remove_storageitem(key) {
window.sessionStorage.removeItem(key);
}

There's a full sessionStorage example in the listing ch06/offline-
example/session-storage-1.html.

The only difference between the two types of storage is the length of
time the items are stored. Session storage is only guaranteed to last as
long as the browser process; if the browser's closed, then any data