View and Edit local Storage in Microsoft Edge Browser

Microsoft Edge is a browser developed by Microsoft that comes pre-installed in computers with Windows OS. Earlier in the late 1990s Microsoft spent $100 million per year to develop Internet Explorer Later it was discontinued in the year 2016 so as its successor Microsoft created a new browser called Edge which has become very famous for development and gives us many features that other browsers do. Browsers provide local storage e.g. Chrome, Edge, Safari, etc. so in this article let’s see how we can view and edit local storage in Edge but before that, we will explore what local storage is.

What is Local Storage?

Local Storage is a part of web storage API which provides a way for websites to store the data persistently as a key, value pair this data stays even if the user closes the browser. webstorage API is a web development API that provides web applications to store and manage data locally it offers two mechanisms one is localStorage and the other is sessionStorage unlike localStorage, sessionStorage data will be removed as soon as the user closes the tab or the window. Both of them come with a storage of 10 MB per domain. As convenient as it may be we should not store sensitive data as they can be stolen using XSS attacks.

1. View Local Storage:

To view the local storage in Microsoft Edge please follow the below steps.

Step 1: Once we open the Edge browser right-click on the page then click on inspect thereafter you will see the developer tool similar to the one below.

Step 2: As we see a expand button beside “Lighthouse” click on it you will see various options select Application after that we will see similar kind of screen.

Step 3: Click on a domain as you expand the local storage of your choice to view the key value pairs.

2. Create and Edit Local Storage:

Step 1: We can edit the local storage by selecting the domain of our choice and then in the Application tab double click on the key to create a row then give a key which is like a name of the variable and also enter the data.

Step 2: As we can see in the above picture that the key value pairs are empty for now as we double click the under the key a new row will be created after that we can enter the data.

Step 3: In this step we will see on how we will edit the localstorage for that we have two options where we can directly edit it from the application tab or using the console. First Let’s explore the Application tab to edit localstorage. Access the Application tab and double click the value or key which you want to change then change the data and hit enter.

Edit using Application tab

3. Deleting LocalStorage:

• If we want to delete the entire key value pairs of a particular domain you can do so by expanding that domain and right click then “clear”.
• Instead if you just want to delete a particualr key-value pair you can do that either by using console or by using the application tab let’s see on how can delete it by using the Application tab. Go to the particular key-value pair right click on it then click on delete. It gets removed from the locaStorage.

4. Interaction with LocalStorage using Console:

We can get the local storage data by using ‘.getItem’ method below are the different kind of methods we can use to edit the localstorage.

localStorage.setItem("key", value);
loalStorage.getItem("key);
localStorage.removeItem("key"):

If you want to clear the local storage in the current domain you can do so by using the following command in the console tab. It entirely clears the localstorage of current domain this can be useful when we want to perform a clean up.

localStorage.clear();

In summary, local storage is a web storage API feature that allows websites to store data persistently as key-value pairs, surviving browser closures. Microsoft Edge offers a straightforward way to view and edit local storage. You can access it through the developer tools, and the console provides methods like localStorage.setItem() and localStorage.clear() for interaction.