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
HTML DOM Storage getItem() method
The HTML DOM Storage getItem() method is used to retrieve the value of a specific item from web storage by providing its key name. If the key exists, it returns the stored value as a string. If the key doesn't exist, it returns null.
The getItem() method works with both localStorage (persistent storage) and sessionStorage (temporary storage that expires when the tab closes).
Syntax
Following is the syntax for the Storage getItem() method −
localStorage.getItem(keyname);
OR
sessionStorage.getItem(keyname);
Parameters
The getItem() method accepts a single parameter −
keyname − A string representing the name of the key whose value you want to retrieve from storage.
Return Value
The method returns −
A string containing the value associated with the specified key if the key exists.
null if the key does not exist in the storage.
Basic Example
Following example demonstrates storing and retrieving a simple value using localStorage −
<!DOCTYPE html>
<html>
<head>
<title>localStorage getItem() Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>localStorage getItem() Method</h2>
<button onclick="storeValue()">Store Value</button>
<button onclick="retrieveValue()">Retrieve Value</button>
<button onclick="clearValue()">Clear Value</button>
<p id="result"></p>
<script>
function storeValue() {
localStorage.setItem("username", "TutorialsPoint");
document.getElementById("result").innerHTML = "Value stored: username = 'TutorialsPoint'";
}
function retrieveValue() {
var value = localStorage.getItem("username");
if (value !== null) {
document.getElementById("result").innerHTML = "Retrieved value: " + value;
} else {
document.getElementById("result").innerHTML = "No value found for key 'username'";
}
}
function clearValue() {
localStorage.removeItem("username");
document.getElementById("result").innerHTML = "Value cleared from localStorage";
}
</script>
</body>
</html>
The output shows how values are stored and retrieved −
Store Value Retrieve Value Clear Value (Initially shows nothing. After clicking buttons, displays messages about storing/retrieving values)
Click Counter Example
Following example creates a persistent click counter using localStorage −
<!DOCTYPE html>
<html>
<head>
<title>Storage getItem() Click Counter</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Persistent Click Counter</h2>
<p>Click the button to increment the counter. The count persists even after page refresh.</p>
<button onclick="incrementCounter()" style="font-size: 16px; padding: 10px 20px;">Click Me</button>
<p id="display" style="font-size: 18px; color: #333; margin-top: 20px;"></p>
<script>
// Display current count when page loads
window.onload = function() {
displayCount();
};
function incrementCounter() {
var currentCount = localStorage.getItem("clickCount");
var count = currentCount ? parseInt(currentCount) : 0;
count++;
localStorage.setItem("clickCount", count);
displayCount();
}
function displayCount() {
var count = localStorage.getItem("clickCount");
if (count !== null) {
document.getElementById("display").innerHTML = "Total clicks: " + count;
} else {
document.getElementById("display").innerHTML = "No clicks yet. Click the button!";
}
}
</script>
</body>
</html>
The counter value persists across browser sessions and page refreshes −
Persistent Click Counter Click the button to increment the counter. The count persists even after page refresh. [Click Me] Total clicks: (shows current count)
SessionStorage Example
Following example demonstrates the difference between localStorage and sessionStorage −
<!DOCTYPE html>
<html>
<head>
<title>localStorage vs sessionStorage</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Storage Comparison</h2>
<div style="margin: 20px 0;">
<h3>localStorage (Persistent)</h3>
<button onclick="setLocal()">Set localStorage</button>
<button onclick="getLocal()">Get localStorage</button>
<p id="localResult"></p>
</div>
<div style="margin: 20px 0;">
<h3>sessionStorage (Temporary)</h3>
<button onclick="setSession()">Set sessionStorage</button>
<button onclick="getSession()">Get sessionStorage</button>
<p id="sessionResult"></p>
</div>
<script>
function setLocal() {
localStorage.setItem("localData", "This persists across sessions");
document.getElementById("localResult").innerHTML = "localStorage data set!";
}
function getLocal() {
var data = localStorage.getItem("localData");
document.getElementById("localResult").innerHTML = data || "No localStorage data found";
}
function setSession() {
sessionStorage.setItem("sessionData", "This expires when tab closes");
document.getElementById("sessionResult").innerHTML = "sessionStorage data set!";
}
function getSession() {
var data = sessionStorage.getItem("sessionData");
document.getElementById("sessionResult").innerHTML = data || "No sessionStorage data found";
}
</script>
</body>
</html>
The localStorage data persists after page refresh, while sessionStorage data is cleared when the browser tab is closed.
Error Handling
It's good practice to handle cases where storage might not be available or when keys don't exist −
function safeGetItem(key) {
try {
var value = localStorage.getItem(key);
return value !== null ? value : "Key not found";
} catch (error) {
return "Storage not available";
}
}
Browser Compatibility
The getItem() method is supported in all modern browsers −
| Browser | Support |
|---|---|
| Chrome | 4.0+ |
| Firefox | 3.5+ |
| Safari | 4.0+ |
| Edge | 12.0+ |
| Internet Explorer | 8.0+ |
Conclusion
The getItem() method is essential for retrieving data from web storage. It returns the stored value as a string if the key exists, or null if not found. Always check for null values and handle storage errors appropriately in production applications.
180 Views
