How to set and get value in localstorage using JavaScript?
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()
Share This with your friend by choosing any social account
Comments
Your Comments
You may also read following recent articles
![]() |
7 Ways to Retain More of Every Book You Read!
04-Feb-2023 11 |
![]() |
Top 5 Most Tech Skills for 2023!
04-Feb-2023 10 |
![]() |
Rupee Drops to Historic Low After Comments From Dar, PM Shehbaz Cause Market to Panic!
03-Feb-2023 18 |
![]() |
What Is Technical SEO? Basics and 10 Best Practices!
03-Feb-2023 24 |
|
Top 10 Most Important IT Skills in 2023!
02-Feb-2023 36 |
![]() |
How To Create A Content Strategy Framework!
02-Feb-2023 18 |
![]() |
Can GPT-3 pay in the future?!
02-Feb-2023 7 |
![]() |
What is digital marketing? !
02-Feb-2023 46 |
|
Top Software Testing Trends in 2023!
01-Feb-2023 67 |
![]() |
How To Make Money on YouTube in 2023!
31-Jan-2023 36 |
![]() |
The 6 Best Entry-Level Sales Jobs To Start Your Career!
31-Jan-2023 23 |
![]() |
Affiliate Marketing Program for Beginners!
31-Jan-2023 5 |