Article Categories

Selected Reading

How to delete Web Storage?

Javascript Web Development Front End Scripts

Web Storage provides methods to delete stored data from both Local Storage and Session Storage. Understanding how to properly clear this data is essential for maintaining user privacy and managing storage space effectively.

Removing Individual Items

To delete a specific item from storage, use the removeItem() method with the key name:

<!DOCTYPE HTML>
<html>
<body>
   <script>
      // Store some data first
      localStorage.setItem('username', 'john');
      localStorage.setItem('theme', 'dark');
      
      console.log('Before removal:', localStorage.getItem('username'));
      
      // Remove specific item
      localStorage.removeItem('username');
      
      console.log('After removal:', localStorage.getItem('username'));
      console.log('Theme still exists:', localStorage.getItem('theme'));
   </script>
</body>
</html>

Before removal: john
After removal: null
Theme still exists: dark

Clearing All Storage Data

The clear() method removes all items from the storage:

<!DOCTYPE HTML>
<html>
<body>
   <script>
      // Store multiple items
      localStorage.setItem('user', 'alice');
      localStorage.setItem('score', '100');
      localStorage.setItem('level', '5');
      
      console.log('Items before clear:', localStorage.length);
      
      // Clear all local storage
      localStorage.clear();
      
      console.log('Items after clear:', localStorage.length);
      console.log('User data:', localStorage.getItem('user'));
   </script>
</body>
</html>

Items before clear: 3
Items after clear: 0
User data: null

Session Storage Deletion

Session Storage uses identical methods for deletion but data is automatically cleared when the browser tab closes:

<!DOCTYPE HTML>
<html>
<body>
   <script>
      // Session storage operations
      sessionStorage.setItem('tempData', 'temporary');
      console.log('Session data:', sessionStorage.getItem('tempData'));
      
      // Remove specific session item
      sessionStorage.removeItem('tempData');
      console.log('After removal:', sessionStorage.getItem('tempData'));
      
      // Clear all session storage
      sessionStorage.clear();
   </script>
</body>
</html>

Session data: temporary
After removal: null

Practical Example: Hit Counter with Reset

<!DOCTYPE HTML>
<html>
<body>
   <script>
      // Check if reset is requested (you can modify this condition)
      let shouldReset = false; // Change to true to test reset
      
      if (shouldReset) {
         localStorage.clear();
         console.log('Storage cleared!');
      }
      
      // Increment hit counter
      if (localStorage.hits) {
         localStorage.hits = Number(localStorage.hits) + 1;
      } else {
         localStorage.hits = 1;
      }
      
      console.log('Total Hits: ' + localStorage.hits);
      
      // Show current storage contents
      console.log('Storage length:', localStorage.length);
   </script>
</body>
</html>

Total Hits: 1
Storage length: 1

Storage Deletion Methods Comparison

Method	Purpose	Scope
`removeItem(key)`	Delete specific item	Single key-value pair
`clear()`	Delete all items	Entire storage

Key Points

Session Storage automatically clears when the browser tab closes
Local Storage persists until manually cleared or browser data is deleted
Always check if an item exists before trying to use it after deletion
Use clear() cautiously as it removes all stored data

Conclusion

Web Storage deletion is straightforward using removeItem() for specific items and clear() for all data. Proper storage management helps maintain user privacy and prevents data accumulation issues.

karthikeya Boyini

Updated on: 2026-03-15T23:18:59+05:30

353 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next