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
Clearing localStorage in JavaScript?
localStorage is a web storage API that persists data in the browser until explicitly cleared. Here are two effective methods to clear localStorage in JavaScript.
Method 1: Using clear() Method
The clear() method removes all key-value pairs from localStorage at once. This is the most efficient approach.
// Store some data first
localStorage.setItem("name", "John");
localStorage.setItem("age", "25");
localStorage.setItem("city", "New York");
console.log("Before clearing:", localStorage.length);
// Clear all localStorage
localStorage.clear();
console.log("After clearing:", localStorage.length);
Before clearing: 3 After clearing: 0
Method 2: Iterating and Deleting Keys
This approach manually iterates through localStorage and deletes each key individually. Note that we collect keys first to avoid iteration issues during deletion.
// Store some data
localStorage.setItem("product", "Laptop");
localStorage.setItem("price", "$999");
localStorage.setItem("brand", "TechCorp");
console.log("Items before deletion:", localStorage.length);
// Collect all keys first
let keys = Object.keys(localStorage);
// Delete each key
for(let key of keys) {
localStorage.removeItem(key);
}
console.log("Items after deletion:", localStorage.length);
Items before deletion: 3 Items after deletion: 0
Complete Example with HTML
<html>
<body>
<p id="storage"></p>
<script>
if (typeof(Storage) !== "undefined") {
// Set some data
localStorage.setItem("product", "Tutorix");
// Display before clearing
console.log("Before clear:", localStorage.getItem("product"));
// Clear localStorage
localStorage.clear();
// Try to get the item after clearing
let result = localStorage.getItem("product");
document.getElementById("storage").innerHTML =
result ? result : "localStorage is empty";
} else {
document.getElementById("storage").innerHTML =
"Sorry, no Web Storage compatibility...";
}
</script>
</body>
</html>
Comparison
| Method | Performance | Use Case |
|---|---|---|
localStorage.clear() |
Fast | Clear all data at once |
| Manual iteration | Slower | Selective deletion with conditions |
Browser Compatibility Check
Always check for localStorage support before using it to ensure compatibility across different browsers.
function clearLocalStorage() {
if (typeof(Storage) !== "undefined") {
localStorage.clear();
console.log("localStorage cleared successfully");
} else {
console.log("localStorage not supported");
}
}
clearLocalStorage();
localStorage cleared successfully
Conclusion
Use localStorage.clear() for complete data removal as it's the most efficient method. The manual iteration approach is useful when you need selective deletion based on specific conditions.
568 Views
