
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
Retrieve element from local storage in JavaScript?
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.
- Related Articles
- Difference between Local Storage, Session Storage, and Cookies in JavaScript
- Set the value in local storage and fetch – JavaScript?
- Storing Credentials in Local Storage
- Difference between Session Storage and Local Storage in HTML5
- Thread-local storage (TLS)
- Retrieve an element from ArrayList in Java
- Build a Site Bookmark App with JavaScript by using Local Storage
- Trick to store credentials in local storage
- HTML DOM Local Storage clear() method
- Retrieve the last element from a LinkedList in Java
- Checking if a key exists in HTML5 Local Storage
- Android 4.0.1 breaks WebView HTML 5 local storage?
- How to save cache in local storage of android webview?
- How to save database in local storage of android webview?
- How to retrieve stored value from div element using jQuery?
