How to Inspect, Edit, and Clear LocalStorage and SessionStorage in Google Chrome DevTools

Modern single-page applications (SPAs), authentication systems, and client-heavy websites rely extensively on the Web Storage API to persist client-side application state across browser sessions. The Web Storage API provides two primary mechanisms: localStorage, which stores key-value strings persistently without an expiry date, and sessionStorage, which maintains data exclusively for the duration of the active browser tab session. Google Chrome DevTools includes dedicated management consoles within the Application panel that allow developers, security auditors, and technical users to inspect, modify, add, export, and delete stored key-value pairs in real time.

Understanding localStorage and sessionStorage in Web Applications

Both storage engines operate under a strict same-origin security policy, meaning keys stored by https://example.com cannot be accessed by subdomains or foreign protocols. However, their lifecycle and persistence characteristics differ fundamentally:

• localStorage: Retains stored data indefinitely until explicitly cleared by client-side JavaScript, manual user deletion, or website clearing routines. It survives browser restarts and page refreshes, making it common for saving interface themes, persistent UI preferences, and offline form drafts.
• sessionStorage: Scoped strictly to the active top-level browsing context (tab). If a user closes the tab or terminates the browser window, all associated keys are purged instantly. Opening a link in a new tab instantiates a separate, isolated session storage instance.

Accessing the Storage Panel in Google Chrome DevTools

To inspect active client storage keys on any webpage:

1. Navigate to the target website in Google Chrome.
2. Open DevTools by pressing F12 or Ctrl + Shift + I on Windows/Linux (or Cmd + Option + I on macOS). Alternatively, right-click anywhere on the webpage and select Inspect.
3. Click the Application tab located on the primary DevTools navigation bar. (If the tab is hidden due to window width, click the double-arrow >> overflow icon and select Application).
4. In the left-hand navigation pane, locate the Storage tree.
5. Expand the Local storage or Session storage header by clicking the disclosure chevron.
6. Click on the specific domain origin (such as https://digitash.com) to display its key-value table in the main viewing pane.

Inspecting and Filtering Stored Key-Value Pairs

Selecting an origin displays an interactive data grid containing two columns: Key and Value. Long values, such as JSON-serialised configuration trees or JWT tokens, can be selected to display formatted, multi-line string content in the preview pane below the grid.

If an application stores dozens of keys, use the Filter text box at the top of the panel to locate specific entries by matching substrings within key names or data payloads. Clicking either table column header toggles alphabetical sorting in ascending or descending order.

Editing and Adding Keys at Runtime

Chrome DevTools allows direct inline editing of storage values without executing manual JavaScript commands in the Console:

1. Modify an Existing Value: Double-click any cell within the Value column. The text converts into an editable input field. Type the revised string or JSON payload and press Enter to commit the change. The application immediately reads the updated value on subsequent script calls.
2. Add a New Key-Value Pair: Double-click the empty row at the bottom of the table. Enter a unique string in the Key cell, press Tab, input the desired value, and press Enter.
3. Delete an Individual Entry: Select the target key row and press the Delete key on your keyboard, or click the Delete Selected icon (represented by an X or circle with a slash) located in the table toolbar.

Clearing Storage and Simulating First-Time Visits

To purge all keys for a specific origin during troubleshooting, click the Clear All icon (circle with a diagonal line) in the storage table toolbar. Alternatively, navigate to the Storage overview pane in the left sidebar, select the desired data categories (including Local and session storage, IndexedDB, and Cache storage), and click Clear site data to simulate an unauthenticated, first-time user visit cleanly.