Retrieve element from local storage in JavaScript?

Javascript Web Development Front End Technology

Let us discuss how to retrieve element from local storage with suitable examples in Javascript.

To retrieve elements from the local storage in Java Script, we use getItem() method which helps us to access elements that are stored in the local storage object. The getItem() method belongs to the storage object. It can be a local storage object or a session storage object. The data that is stored inside the local storage is non-volatile storage. Even if we run out of the session time in a browser or if we close the browser, the data gets stored in the local storage. This is an advantage of the local storage over the session storage.

To get an element from local storage, firstly we need to create an element and store it in the local storage. Later, we can retrieve it. The methods in the local storage are setItem(), getItem(), removeItem(), and clear().

setItem() is used to set the value for Local storage item.
getItem() is used to retreive the local storage item.
removeItem() is used to remove a particular local storage item.
clear() is used to remove all the items in the local storage.

Syntax

The syntax to represent for retrieval of an element from local storage in javascript is −

localStorage.getItem(‘key name’);

Where, key is the single parameter, and the return value is a string.

Example 1

This is an example program for retrieving elements from local storage in javascript.

<html>
<head>
   <title>Retrieve element from local storage in JavaScript?</title>
</head>
<body style="text-align: center;">
   <p>Retrieving elements from local storage in JavaScript</p>
   <p id="result"></p>
   <script>
      const user = {
         name: 'Raj',
         aadhar_id: '2019 8812 9912',
         age: 18
      }
      localStorage.setItem("user", JSON.stringify(user));
      document.getElementById('result').innerHTML = localStorage.getItem('user');
   </script>
</body>
</html>

The output for the above example program is

Example 2

This is an example program to create an item in the local storage and retrieve the item.

<html>
<head>
   <title>Retrieve element from local storage in JavaScript?</title>
</head>
<body style="text-align: center;">
   <p>Retrieving elements from local storage in JavaScript</p>
   <p id="result"></p>
   <script>
      let datetime = new Date();
      let time = datetime.toLocaleTimeString();
      localStorage.current_time = time;// Create an element in the Local storage object.
      document.getElementById('result').innerHTML = localStorage.getItem('current_time'); //Retreive the element.
   </script>
</body>
</html>

The output for the above example program is −

Example 3

This is an example program for creating and removing the items in the local storage using javascript.

<html>
<head>
   <title>Retrieve element from local storage in JavaScript?</title>
</head>
<body style="text-align: center;">
   <p>Retrieving elements from local storage in JavaScript</p>
   <p id="result"></p>
   <script>
      const user = {
         name: 'Raj',
         aadhar_id: '2019 8812 9912',
         age: 18
      }
      localStorage.def_storage_type = 'Local storage'
      localStorage.setItem("user", JSON.stringify(user));
      document.getElementById('result').innerHTML = 'localStorage.getItem("user") : ' + localStorage.getItem("user") +
      '<br/>' + "localStorage.getItem('def_storage_type') : " + localStorage.getItem('def_storage_type') +
      '<br/>'; //Retreive the element.
      localStorage.removeItem('def_storage_type');
      document.getElementById('result').innerHTML += '<br/>' + 'After deleting the element def_storage_type: ' +
      '<br/>' + "localStorage.getItem('def_storage_type') : " + localStorage.getItem('def_storage_type') +'<br/>';
      localStorage.clear();
      document.getElementById('result').innerHTML += '<br/>' +"The data in the Local storage has been cleared using clear()" + '<br/>' +
      "localStorage.getItem('user') : " + localStorage.getItem('user') + '<br/>' +"localStorage.getItem('def_storage_type') : " + localStorage.getItem('def_storage_type');
   </script>
</body>
</html>

On executing the above code, the below output is generated.