Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Retrieve element from local storage in JavaScript?
To retrieve elements from local storage in JavaScript, we use the localStorage.getItem() method. Local storage provides persistent client-side data storage that remains available even after closing the browser.
Local storage is a web API that allows you to store key-value pairs in a user's browser. Unlike session storage, data in local storage persists until explicitly removed or cleared by the user. This makes it ideal for storing user preferences, application state, or cached data.
Local Storage Methods
Local storage provides four main methods for data management:
setItem(key, value) - Stores a key-value pair in local storage
getItem(key) - Retrieves a value by its key from local storage
removeItem(key) - Removes a specific item from local storage
clear() - Removes all items from local storage
Syntax
localStorage.getItem('keyName');
The getItem() method takes a key as parameter and returns the corresponding value as a string, or null if the key doesn't exist.
Example 1: Storing and Retrieving a JSON Object
<html>
<head>
<title>Retrieve element from local storage in JavaScript</title>
</head>
<body style="text-align: center;">
<p>Retrieving JSON object from local storage</p>
<p id="result"></p>
<script>
const user = {
name: 'Raj',
aadhar_id: '2019 8812 9912',
age: 18
};
// Store object as JSON string
localStorage.setItem("user", JSON.stringify(user));
// Retrieve and display the stored data
const retrievedData = localStorage.getItem('user');
document.getElementById('result').innerHTML = 'Stored data: ' + retrievedData;
// Parse back to object
const parsedUser = JSON.parse(retrievedData);
document.getElementById('result').innerHTML += '<br>Name: ' + parsedUser.name;
</script>
</body>
</html>
Example 2: Storing and Retrieving Simple Values
<html>
<head>
<title>Retrieve simple values from local storage</title>
</head>
<body style="text-align: center;">
<p>Working with simple local storage values</p>
<p id="result"></p>
<script>
let datetime = new Date();
let time = datetime.toLocaleTimeString();
// Store current time
localStorage.setItem('current_time', time);
// Retrieve and display
const storedTime = localStorage.getItem('current_time');
document.getElementById('result').innerHTML = 'Current time: ' + storedTime;
</script>
</body>
</html>
Example 3: Complete Local Storage Operations
<html>
<head>
<title>Complete local storage example</title>
</head>
<body style="text-align: center;">
<p>Local Storage: Store, Retrieve, Remove, and Clear</p>
<p id="result"></p>
<script>
const user = {
name: 'Raj',
aadhar_id: '2019 8812 9912',
age: 18
};
// Store multiple items
localStorage.setItem('storage_type', 'Local storage');
localStorage.setItem("user", JSON.stringify(user));
// Retrieve and display
let output = 'User data: ' + localStorage.getItem("user") + '<br>';
output += 'Storage type: ' + localStorage.getItem('storage_type') + '<br><br>';
// Remove specific item
localStorage.removeItem('storage_type');
output += 'After removing storage_type: ' + localStorage.getItem('storage_type') + '<br><br>';
// Clear all data
localStorage.clear();
output += 'After clearing all data:<br>';
output += 'User: ' + localStorage.getItem('user') + '<br>';
output += 'Storage type: ' + localStorage.getItem('storage_type');
document.getElementById('result').innerHTML = output;
</script>
</body>
</html>
Key Points
Local storage only stores strings - use
JSON.stringify()andJSON.parse()for objectsgetItem()returnsnullif the key doesn't existData persists until manually removed or browser storage is cleared
Storage limit is typically 5-10MB per origin
Always check if local storage is supported before using it
Browser Compatibility
Local storage is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 8+. Always test for availability in older browsers if needed.
Conclusion
Use localStorage.getItem() to retrieve stored data from local storage. Remember to handle cases where keys don't exist and parse JSON strings back to objects when necessary.
7K+ Views
