HTML and CSS Reference
In-Depth Information
Using the sessionStorage and localStorage Objects
In this section, you create the simple web form shown in Figure 7-1.
Figure 7-1.
Simple web form using the
localStorage
object
The web form allows you to store key-value pairs in the
localStorage
object. It consists of two text
boxes in which the user can enter a key and a value, respectively. Clicking the Store Data button stores a
key and its value in the
localStorage
object. A list of all the keys and their values is shown in the bottom
table. Clicking the Clear Data button removes all the entries from the
localStorage
. Listing 7-1 shows how
the
click
event handlers of both buttons deal with the
localStorage
object.
Listing 7-1.
Using the
localStorage
Object
var storage = window.localStorage;
$(document).ready(function () {
if (!Modernizr.localstorage) {
alert("This browser doesn't support HTML5 Local Storage!");
}
$("#store").click(OnStoreClick);
$("#clear").click(OnClearClick);
});