How to set and get value in localstorage using JavaScript?

  By Ahsan   Posted on June-24-2022 

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:

  1. Local storage use we store temporary data like cart item.
  2. To store user’s accessing URL’s
  3. Store form data which may be partially file or may fil later

Some limitation of Local storage:

Following are the limitation of Local storage:

  1. As local storage store data on browser so that any individual can access it after browser close or refresh.
  2.  Insecure data
  3. Synchronous operation
  4. Limit storage capacity

Local storage Methods:

Following are the four method of local storage to store data, get data and remove data.

  1. SetItem()
  2. getItem()
  3. removeItem()
  4. 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:

  1. Local storage is used to store data on browser temporally.
  2. It is the advance version of cookies and store more data
  3. For set data in local storage we use following syntax

                 localStorage.setItem("key", "value");

 

  1. For get from local storage we use following syntax:

 

           localStorage.getItem("localemail");

 

  1. For remove data we use following

 

`         localStorage.removeItem("key");

 

  1. For clear data we use following syntax

   localStorage.clear()

By      24-Jun-2022 Views  68


Comments

Your Comments

You may also read following recent articles

Recent Column 7 Ways to Retain More of Every Book You Read!
04-Feb-2023    11
Recent Column Top 5 Most Tech Skills for 2023!
04-Feb-2023    10
Recent Column Dubai’s Luxury Villas Prices Spike 100% Thanks to the Richest!
03-Feb-2023    17
Recent Column Rupee Drops to Historic Low After Comments From Dar, PM Shehbaz Cause Market to Panic!
03-Feb-2023    18
Recent Column What Is Technical SEO? Basics and 10 Best Practices!
03-Feb-2023    24
Recent Column Top 10 Most Important IT Skills in 2023!
02-Feb-2023    36
Recent Column How To Create A Content Strategy Framework!
02-Feb-2023    18
Recent Column Can GPT-3 pay in the future?!
02-Feb-2023    7
Recent Column What is digital marketing? !
02-Feb-2023    46
Recent Column Content Planning: How to Create a Content Plan, Step by Step!
01-Feb-2023    16
Recent Column Top Software Testing Trends in 2023!
01-Feb-2023    67
Recent Column How To Make Money on YouTube in 2023!
31-Jan-2023    36
Recent Column The 6 Best Entry-Level Sales Jobs To Start Your Career!
31-Jan-2023    23
Recent Column Best Web and Desktop Application Security Testing Techniques!
31-Jan-2023    52
Recent Column Affiliate Marketing Program for Beginners!
31-Jan-2023    5