Web Storage API

localStorage

localStorage maintains a separate storage area for each given origin. Data stored in it persists even after the browser is closed. A key/value pair with key name fruit and value Orange can be created and stored in localStorage either as

					localStorage.fruit = "Orange";
				

Orange icon made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY

or by using the setItem() method as

					localStorage.setItem("fruit", "Orange");
				

If you are using Chrome browser, press the F12 key, click the Application tab, and expand Local Storage. Under the Key column you will find fruit and the corresponding value under the Value column will be Orange.

The value of fruit can be retrieved either by using the dot notation as

					localStorage.fruit
				

or by passing the key name into the getItem() method as

					localStorage.getItem("fruit");
				

Storing JavaScript objects is also similar, but since item values in localStorage are stored as strings, we first need to convert objects into JSON string and store it. Below is a sample car object, which is converted into string first before storing it.

					
					var car = {
						brand: "Maserati",
						model: "Quattroporte S"	
					};

					localStorage.setItem("car", JSON.stringify(car));
					
				

To convert the string back to object, we use the JSON.parse() method

					
						JSON.parse(localStorage.getItem("car"));
					
				

We can now access the brand and model properties of the car object as

					
						JSON.parse(localStorage.getItem("car")).brand;
						JSON.parse(localStorage.getItem("car")).model;
					
				

localStorage data items can be removed via the removeItem() method. In the example below, we remove the car item we just created above.

					localStorage.removeItem("car");
				

To remove all localStorage items in a site, use the clear() method as

					localStorage.clear();
				

This, however, clears localStorage items specific to an origin only. To clear all localStorage items stored in a browser, do the following

sessionStorage

As in localStorage, data in sessionStorage is also stored in key/value pairs. But unlike localStorage, data stored in sessionStorage is lost once the browser is closed.

Below we give an example to store a key/value pair, with key name fruit and value Pear. We can use the dot notation as

					sessionStorage.fruit = "Pear";
				

or use the setItem() method as

					sessionStorage.setItem("fruit", "Pear");
				

In Chrome browser, press the F12 key, click the Application tab, and expand Session Storage. Under the Key column you will find fruit and the corresponding value under the Value column will be Pear.

Notes

• Web Storage API is not officially part of HTML 5