HTML – Web storage

web_storage

Web storage is the feature that introduces with html5 and As we know we store application data inside cookies, which include a lot of server request. But after web storage, we have a more secure and elegant way to store data which provide a large amount of space to store data with awesome performance. Here we have at least 5MB limit to store data locally.

Web storage is a way by which an application can store data locally inside a web browser. It’s used for per origin. All pages can store the same amount of data.

In this api we have two main object –

  • window.sessionStorage ( data store for one session means when we close tab data will lost)
  • window.localStorage ( data store without expiration date )

// Check brwoser support

if ( typeof(Storage) != "undefined" ) {
	// works
} else {
	// Not supported by browser
}

Both Objects have the same method as –


setItem(key, value); //set stroage
getItem(key); // get stroage
removeItem(key); // remove key from stroage
clear(); // clear all stroage
key(index); // get stroage according to index

All values stored inside Storage as a string so be careful when you are using storage API.
how to use Storage –


localStorage.setItem("no", 1);
console.info(typeof localStorage.getItem("no")); // string

So if you want to covert this string value into no you need to use parseInt method.


localStorage.setItem("no", 1);
console.info(typeof parseInt(localStorage.getItem("no"))); // number

To more details and useful example you can read this article – Local storage techniques

You May Also Like

About the Author: Pankaj Bisht