How to View and Edit local Storage in Microsoft Edge Browser

Local Storage in Microsoft Edge is a key component for web developers, allowing websites to store data locally in the user's browser. This feature is especially useful for saving preferences, session data, or even small-scale databases that need to persist between sessions. If you're looking to view or edit Local Storage data in Edge, the Developer Tools provide an easy-to-use interface.

In this guide, we'll walk you through the steps to access and manipulate Local Storage in the Microsoft Edge browser.

What is Local Storage

Local Storage is a feature of the Web Storage API that allows websites to store data persistently in your browser as key-value pairs. This data remains available even after you close and reopen the browser. It's important to note that while Local Storage offers convenience, it is not designed for storing sensitive information, as it can be vulnerable to cross-site scripting (XSS) attacks.

1. Viewing Local Storage in Microsoft Edge

To inspect and manage the data stored by websites in your browser, Microsoft Edge provides a set of developer tools. Follow these steps to access and view Local Storage:​

Step 1: Open Microsoft Edge Developer Tools

• Launch Microsoft Edge on your device.​
• Press Ctrl + Shift + I (on Windows) or Cmd + Option + I (on macOS) to open the Developer Tools.​
• Alternatively, right-click on a webpage and select Inspect to open the Developer Tools.

Step 2: Access the Application Tab

• In the Developer Tools panel, click on the Application tab.​
• If the Application tab isn't visible, click the >> icon to reveal more tabs.

👁 Screenshot-2023-09-12-174455-(1)

Step 3: Locate Local Storage

• In the left sidebar under the Storage section, click on Local Storage.​
• Expand the Local Storage menu to see a list of domains.​
• Click on the domain of the current website to view its stored key-value pairs in the main pane.

👁 expand

2. Creating and Editing Local Storage Data in Microsoft Edge

Microsoft Edge's Developer Tools provide a convenient way to manage Local Storage, allowing you to add, modify, or remove data stored by websites. Follow these steps to create and edit Local Storage entries:​

Step 1: Open Microsoft Edge Developer Tools

• Launch Microsoft Edge on your device.​
• Press Ctrl + Shift + I (on Windows) or Cmd + Option + I (on macOS) to open the Developer Tools.​
• Alternatively, right-click on a webpage and select Inspect to open the Developer Tools.

Step 2: Access the Application Tab

• In the Developer Tools panel, click on the Application tab.​
• If the Application tab isn't visible, click the >> icon to reveal more tabs.​

Step 3: Locate Local Storage

• In the left sidebar under the Storage section, click on Local Storage.​
• Expand the Local Storage menu to see a list of domains.​
• Click on the domain of the current website to view its stored key-value pairs in the main pane.

👁 edit

Step 4: Create a New Local Storage Entry

• In the key column of the Local Storage pane, double-click on an empty row.​
• A new row will appear with the cursor focused in the Key field.
• Enter a name for the key (e.g., username).​
• Press the Tab key to move to the Value field.​
• Enter the desired value for the key (e.g., Dom larsen).​
• Press Enter to save the new key-value pair.

👁 edited

Step 5: Edit an Existing Local Storage Entry

• In the Local Storage pane, locate the key-value pair you wish to edit.​
• Double-click on the Key or Value field of the desired row.​
• Modify the key name or value as needed.​
• Press Enter to save your changes.

3. Deleting LocalStorage Data

Step 1: Delete Specific Items

• Select the key-value pair you wish to delete.​
• Press the Delete key or click the Delete Selected button (trash can icon).​

Step 2: Delete All Items for a Domain

Click the Clear All button (trash can icon) to remove all key-value pairs stored for the selected domain.

4. Interaction with LocalStorage using Console

You can also manage Local Storage through the Console tab in Developer Tools:​

Step 1: Open the Console Tab

In Developer Tools, click on the Console tab.​

Step 2: Execute Local Storage Commands

Use JavaScript commands to interact with Local Storage:​

• Set Item: localStorage.setItem('key', 'value');
• Get Item: localStorage.getItem('key');
• Remove Item: localStorage.removeItem('key');
• Clear All: localStorage.clear();

👁 console

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.

Important Considerations:

• Data Persistence: Data stored in Local Storage persists until explicitly deleted. Unlike sessionStorage, Local Storage data remains available across browser sessions.​
• Storage Limitations: Local Storage typically allows up to 10 MB of data per domain.​
• Security: Avoid storing sensitive information in Local Storage, as it is accessible to any scripts running on the page and can be vulnerable to XSS attacks.

By following these steps, you can effectively manage Local Storage in Microsoft Edge, tailoring your browsing experience to your needs while maintaining awareness of security considerations.

Conclusion

Viewing and editing Local Storage in Microsoft Edge is straightforward using the built-in Developer Tools. This feature is especially useful for web developers and testers who need to manage persistent data across browser sessions. Whether you're debugging or modifying data to see how a website behaves, the Application tab provides all the necessary tools to interact with Local Storage efficiently.