Cookies are the old friends of web developer as they allow a lot of flexiblity due to the local storage of data, but with HTML5 we get two new client side storage features. localStorage and sessionStorage are two new HTML5 features, these allow the storage of data on the client end with allowing flexiblity of storing data as long as developer(using program itself)/user doesn’t clean it off or with the end of browser session.
Okay, so we have cookies to store data locally in browser but we have limitations there. Time of expiration, limited space. Oh.. what option do we have? No it is not that dramatic HTML5 has already given a solution to the problem in the form of localStorage and sessionStorage.
Both are used to store data locally on the client(browser) but beware these are HTML5 elements so might be too much for some old browsers to handle. Otherwise all good to go, however you can do a test to check if the browser support the feature or not, if not then you may go the old Cookie way.
if(typeof(localStorage)===undefined){
/*
localStorage not supported use cookies
*/
}
else{
/*
hurrey! the localStorage is supported good to go.
*/
}
Okay, so now I know localStorage/sessionStorage is supported, now What ?
Now, you can go doing whole lot of storing and retrieving of data on browser in the form of String, yes please mind in the form of string, it is not really compatible with the JS object yet. but if you must work with the Object you can always do so using JSON.stringify and operate in the form of string and later on when you retrieve it back just use the reverse operation to convert into string and all happy happy.
Too much for chit chat let us see some code in working now. So what is localStorage and what is sessionStorage and how to know which one to use ?
localStorage is the local storage browser offer you on the system to store anything you want in the form of string. and sessionStorage is not really different than that but is valid until the browser closes. Yes, when the browser closes the data is lost for good. if you want to keep it for next browser session, you can of course use the localStorage.
Both provide 3 methods in the getter/setter form and a remove method to remove it completely. the methods are: getItem, setItem and removeItem.
Okay, enough of talk let us see some examples now, first we are going to use localStorage(the sessionStorage is all the same you can replace local with session and you get it working) to store some stuff and them retrieve it.
console.log(localStorage.getItem("key"));
localStorage.setItem("key","value");
console.log(localStorage.getItem("key"));
The result on console is:
null value
The first null is because there is no key in the localStorage but then we set it using the localStorage.setItem and viola! we have a value when we try to get it again using the another getItem method.
Okay, so we see it is indeed very simple when we set and get the value let us see if the remove actually works(of course it works but we need to show an example don’t we? ) ?
console.log(localStorage.getItem("key"));
localStorage.removeItem("key");
console.log(localStorage.getItem("key"));
The result on console is:
value null
The first console log prints the value but when second getItem is being called the value is already wiped off from the localStorage thus it results in null, as simple as that.
Hope you get the concept of localStorage/sessionStorage now, whenever you use these please consider the browser compatibility as they are HTML5 features and not all the browser version support them out of the box.
