In HTML5 there is a new feature of localStorage. With this feature web pages store data locally inside the user’s web browser.
Earlier, cookies were used for storing data. The data is used only when it is asked. also you can not store large data as there will be a limit. The data is stored in the form of name and value pair.
There are different types that you can store like strings, numbers, objects, complex objects arrays etc.
To check If local storage is supported in your browser, you need to write this code:
if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}
The Get & Set methods:
Strings:
var name = your name!!;
localStorage.setItem(name,name);
// get string
console.log(localStorage.getItem(name)); // will return your name!!
Numbers:
var count = 12;
localStorage.setItem(count,count);
// get string
console.log(localStorage.getItem(count)); // will return 12 as string
// parsing to int
var count = parseInt(localStorage.getItem(count)); // 12
//or
var count = parseFloat(localStorage.getItem(count)); // 12
Objects:
var info = {name:yourname',age:12,gender:male};
localStorage.setItem("userinfo,info);
//fetch object
console.log(localStorage.getItem("userinfo)); // will return "[object Object]"
when you write the above code for storing a object, it will not give the real object instead it will return the string “[object Object]”. That will be saved in the Local storage. You can write the below code that will return the stringifyed object:
var info = {name:yourname',age:12,gender:male};
localStorage.setItem("userinfo,JSON.stringify(info));
//fetch object
console.log(localStorage.getItem("userinfo)); // will return {name:yourname',age:12,gender:male}
0 Comment(s)