Post
Ask Question

Remove Filtered SessionStorage and LocalStorage

Introduction

 
This article explains how to remove all local storage and session storage or remove the storage depending on the key values. For example, if a key contains a specific string then we will remove that local storage and session storage. We will find all the local storage and session storage first and then we will loop through each. If a user needs to delete specific storage depending on a specific condition, we will delete that storage alone.
 
Both localStorage and sessionStorage have been introduced with HTML5. If you are new to the storage mechanism on the client side then you can find learn about that at Storage In HTML5.
 
Please see this article on my blog here.
 
Background
 
I am working on a client-side application where we use localStorage and sessionStorage for saving some key information. What I mean by key information is, like we store the mail id of the user using the application. There I got the requirement to delete the localStorage and sessionStorage depending on the key value. For example, I needed to delete the storage values whose keys start with “logged”. I did the requirement and thought to share it with you all. I hope someone will find it is useful.
 
Using the code
 
To start with you need to include the jQuery reference.
  1. <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>     
Now we need to set the localStorage and sessionStorage, right?
 
Add the storage values in the ready event.
  1. localStorage.setItem("First1","First Local Storage");    
  2. sessionStorage.setItem("First1","First Session Storage");    
  3. localStorage.setItem("Second1","Second Local Storage");    
  4. sessionStorage.setItem("Second1","Second Session Storage");   
    So we have set our localStorage and sessionStorage . Now we need to check whether it is saved or not, right? Just run your page and see your browser console.
     
    image1
     
    image2
     
    Now we will add some elements where we can fire the delete events. Cool?
    1. <a href="#" id="removeAllLocalStorage">Click To Remove All Local Storage</a>  
    2. <br/>  
    3. <br/> <a href="#" id="removeAllLocalStorageWhichStarts">Click To Remove All Local Storage Which Starts With "First"</a>  
    4. <br/>  
    5. <br/> <a href="#" id="removeAllSessionStorage">Click To Remove All Session Storage</a>  
    6. <br/>  
    7. <br/> <a href="#" id="removeAllSessionStorageWhichStarts">Click To Remove All Session Storage Which Starts With "First"</a>  
    8. <br/>  
    9. <br/>
      Once that is done, we add the click event scripts
      1. < script>$(document).ready(function() { localStorage.setItem("First1", "First Local Storage"); sessionStorage.setItem("First1", "First Session Storage"); localStorage.setItem("Second1", "Second Local Storage"); sessionStorage.setItem("Second1", "Second Session Storage"); $("#removeAllLocalStorage").click(function() { Object.keys(localStorage) .forEach(function(key) { localStorage.removeItem(key); }); }); $("#removeAllLocalStorageWhichStarts").click(function() { Object.keys(localStorage) .forEach(function(key) { if ((/^First/.test(key))) { localStorage.removeItem(key); } }); }); $("#removeAllSessionStorage").click(function() { Object.keys(sessionStorage) .forEach(function(key) { sessionStorage.removeItem(key); }); }); $("#removeAllSessionStorageWhichStarts").click(function() { Object.keys(sessionStorage) .forEach(function(key) { if ((/^First/.test(key))) { sessionStorage.removeItem(key); } }); }); });  
      2.     < /script> 
        So everything is set. Now the only pending thing is to just run and see the output. First, we will fire the click event that removes all the local storage. Okay?
         
        image3
         
        Once you clicked, you can see all of your local storage items have been removed.
         
        image4
         
        Now we will reload the page and set the storage items again, this time we will fire the event that deletes the local storage value that has the key starting with “First”.
         
        image5
         
        Once you clicked you can see only the storage element that has the key starting with “First” has been removed.
         
        image6
         
        Next, we will fire the click event that removes all the session storage. Okay?
         
        image7
         
        Once you clicked, you can see all of your session storage items have been removed.
         
        image8
         
        Now we will reload the page and set the storage items again, this time we will fire the event that deletes the session storage value that has the key starting with “First”.
         
        image9
         
        Once you clicked you can see only the session storage element that has key starts with “First” has been removed.
         
        image10
         
        So we have done everything.
         
        Complete Code
        1. <html>    
        2.     <head>    
        3.         <title>Remove all session storage,local storage or remove by key which starts with a particular string - Sibeesh Passion</title>    
        4.         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>    
        5.     </head>    
        6.     <body>    
        7.         <a href="#" id="removeAllLocalStorage">Click To Remove All Local Storage</a>    
        8.         <br/>    
        9.         <br/>    
        10.         <a href="#" id="removeAllLocalStorageWhichStarts">Click To Remove All Local Storage Which Starts With "First"</a>    
        11.         <br/>    
        12.         <br/>    
        13.         <a href="#" id="removeAllSessionStorage">Click To Remove All Session Storage</a>    
        14.         <br/>    
        15.         <br/>    
        16.         <a href="#" id="removeAllSessionStorageWhichStarts">Click To Remove All Session Storage Which Starts With "First"</a>    
        17.         <br/>    
        18.         <br/>    
        19.         <div id="body"></div>    
        20.         <script>      
        21.             $(document).ready(function(){      
        22.                 localStorage.setItem("First1","First Local Storage");      
        23.                 sessionStorage.setItem("First1","First Session Storage");      
        24.                 localStorage.setItem("Second1","Second Local Storage");      
        25.                 sessionStorage.setItem("Second1","Second Session Storage");      
        26.                 $("#removeAllLocalStorage").click(function(){      
        27.                     Object.keys(localStorage)      
        28.                     .forEach(function (key) {      
        29.                         localStorage.removeItem(key);      
        30.                     });      
        31.                 });      
        32.                 $("#removeAllLocalStorageWhichStarts").click(function(){      
        33.                     Object.keys(localStorage)      
        34.                     .forEach(function (key) {      
        35.                         if ((/^First/.test(key))) {      
        36.                             localStorage.removeItem(key);      
        37.                         }      
        38.                     });      
        39.                 });      
        40.                 sionStorage").click(function(){      
        41.                     Object.keys(sessionStorage)      
        42.                     .forEach(function (key) {      
        43.                         sessionStorage.removeItem(key);      
        44.                     });      
        45.                 });      
        46.                 $("#removeAllSessionStorageWhichStarts").click(function(){      
        47.                     Object.keys(sessionStorage)      
        48.                     .forEach(function (key) {      
        49.                         if ((/^First/.test(key))) {      
        50.                             sessionStorage.removeItem(key);      
        51.                         }      
        52.                     });      
        53.                 });      
        54.             });      
        55.         </script>    
        56.     </body>    
        57. </html>    

          Conclusion

           
           I hope you liked this article. Please share your feedback. It is always welcomed. Thanks in advance. 


          Similar Articles