With the advent of HTML5, data storage on a user’s local machine is possible without the need for cookies. The localStorage object allows us to store persistent data, in a key-value pair fashion. There is also a sessionStorage object in which we can store key-value pairs, the data for which is cleared when the user closes their browser window.

Data is added to either object by assigning a value to a given property:

localStorage.foo = 'Hello World!';
console.log(localStorage.foo);

Hello World!

Removal of a key from the object is via. the removeItem method:

localStorage.removeItem(foo);

If we want to remove all keys from our localStorage/sessionStorage object, we can use the clear() method:

localStorage.clear();

We can also iterate through the localStorage/sessionStorage object’s keys using the length property and the key() method:

for(var i=0; i<localStorage.length; i++){
	var key = localStorage.key(i);
	var value = localStorage[key];

	console.log('localStorage[' + key + '] = ' + value);
}

It is also possible to assign variable keys to either object, by treating the object as an associative array:

for (var i=1; i<=10; i++) {
	localStorage['item_' + i] = i+1;
}

for(var i=0; i<localStorage.length; i++){
	var key = localStorage.key(i);
	var value = localStorage.[key];

	console.log('localStorage[' + key + '] = ' + value);
}

localStorage[item_1] = 1;
localStorage[item_2] = 2;
localStorage[item_3] = 3;
localStorage[item_4] = 4;
localStorage[item_5] = 5;
localStorage[item_6] = 6;
localStorage[item_7] = 7;
localStorage[item_8] = 8;
localStorage[item_9] = 9;
localStorage[item_10] = 10;

As web storage is not supported by older browser versions (notably IE 7 and below) we need to check for support before we begin to make use of the localStorage and sessionStorage objects:

if (typeof(Storage) !== 'undefined') {
	// Make use of web storage
}
else {
	// Fall-back code
}