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.

Now we need to set the localStorage and sessionStorage, right? Add the storage values in the ready event.

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.

Now we will add some elements where we can fire the delete events. Cool?

Once that is done, we add the click event scripts

Once you clicked, you can see all of your local storage items have been removed. 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”. Once you clicked you can see only the storage element that has the key starting with “First” has been removed.

Next, we will fire the click event that removes all the session storage. Okay?

Once you clicked, you can see all of your session storage items have been removed.