How to set and get value in localstorage using JavaScript:
Local storage means in JavaScript user can store data on browser with no expiry date or time. In simple words data store longer period of time till then user did not delete their browser cache and history.
Sometime we need to store data of user which is not important for us like user field form or cart items etc, or any type of data which is not sensitive or temporary so that we use local storage of browser. Mostly we use the cookies for that purpose but its storage capacity is 5MB. While the local storage have more than 5MB and also say that local storage is the advance version of the cookies.
When to use the local storage:
Following are the point when we use the local storage:
- Local storage use we store temporary data like cart item.
- To store user’s accessing URL’s
- Store form data which may be partially file or may fil later
Some limitation of Local storage:
Following are the limitation of Local storage:
- As local storage store data on browser so that any individual can access it after browser close or refresh.
- Insecure data
- Synchronous operation
- Limit storage capacity
Local storage Methods:
Following are the four method of local storage to store data, get data and remove data.
- SetItem()
- getItem()
- removeItem()
- clear()
SetItem():
This method is used to store the data on local storage of browser. This method is store keys and values of data.Following syntax is used to set item.
localStorage.setItem("key", "value");
Below example show that how we can use in our html page;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="name">
<input type="text" id="email">
<button type="button" onclick="save();">save</button>
<script>
function save()
{
var name=document.getElementById("name").value;
var email = document.getElementById("email").value;
localStorage.setItem("localname", name);
localStorage.setItem("localemail", email);
}
</script>
</body>
</html>
In the above example we have two inputs with id and one is button with onclick function.When user fill the input fields and click the button, onclick save function call of JavaScript. This function firstly get value with help of their ids after that his value set in local storage.
getItem():
This method is used to get data from local storage. It require the key name to get value. Following are the synax is used for get item.
localStorage.getItem("key");
Below example show that how we can use in our html page;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Name: <span id="name"></span></p>
<p>Email: <span id="email"></span></p>
<script>
document.getElementById("name").innerHTML=localStorage.getItem("localname");
document.getElementById("email").innerHTML= localStorage.getItem("localemail");
</script>
</body>
</html>
Thw above example show that we take to spane with ids when page load the JavaScript get value of name form the local storage using get item function and assign to the spane ids.
RemveItem():
This method is used to remove data from the local storage. To remove data from local storage requires keys. Following are the syntax is used for remove item form local storage.
localStorage.removeItem("key");
Clear():
This method is used to remove all the data in local storage. Following are the syntax is used to clear all data from local storage.
localStorage.clear()
Result/Conclusion:
Following are the conclusion of the this article:
- Local storage is used to store data on browser temporally.
- It is the advance version of cookies and store more data
- For set data in local storage we use following syntax
localStorage.setItem("key", "value");
- For get from local storage we use following syntax:
localStorage.getItem("localemail");
- For remove data we use following
` localStorage.removeItem("key");
- For clear data we use following syntax
localStorage.clear()
