How to Inspect and Manage Local Storage and Session Storage in Safari on Mac Using Web Inspector

The Critical Role of Client-Side Web Storage

Modern progressive web applications (PWAs), e-commerce portals, single-page frameworks (React, Vue, Angular), and authentication workflows rely heavily on HTML5 Web Storage APIs rather than legacy HTTP cookies. Web applications utilise two distinct client-side storage mechanisms:

• Local Storage (window.localStorage): A persistent, origin-isolated key-value store that survives browser tab closures, window terminations, and operating system reboots. It is frequently employed to preserve user interface preferences (such as dark mode toggles), cached user profiles, and persistent application state.
• Session Storage (window.sessionStorage): An ephemeral, origin-isolated key-value store tied strictly to the lifetime of the active browser tab. Once the tab is closed, all stored session keys are immediately purged.

When developing web applications, troubleshooting state desynchronisation, or testing authentication token refreshes on a Mac, web developers must inspect, edit, and delete these stored keys in real time. Apple’s native Safari Web Inspector provides a dedicated storage console engineered specifically for client-side debugging.

Enabling the Develop Menu in Safari on Mac

By default, Apple hides developer tools in Safari to maintain a minimalist consumer interface. To unlock the Web Inspector:

1. Launch Safari on your Mac.
2. Move your cursor to the menu bar at the top of the screen and click Safari > Settings… (or press Command + Comma).
3. In the settings window, select the Advanced tab (indicated by the gear icon).
4. At the very bottom of the pane, check the box labelled Show features for web developers (in older macOS builds, this was labelled “Show Develop menu in menu bar”).
5. Close the settings window. A new Develop menu will now appear permanently in your macOS menu bar.

Accessing the Storage Tab in Safari Web Inspector

With developer features unlocked, inspecting a website’s client-side database takes only seconds:

1. Navigate to the website or local web development server you wish to inspect (e.g., https://example.com or http://localhost:3000).
2. Right-click anywhere on the webpage and select Inspect Element from the contextual menu (or press Option + Command + I).
3. The Web Inspector console will dock at the bottom or side of your Safari window.
4. In the top toolbar of the Web Inspector, locate and click the Storage tab (represented by a database icon).

Navigating Local Storage and Session Storage Trees

The left-hand navigation sidebar of the Storage tab displays a hierarchical tree categorising all client-side data structures associated with the active page:

1. Locating Local Storage: Click the disclosure triangle next to Local Storage. You will see an entry corresponding to the active domain origin (e.g., https://example.com). Click this origin to display its active key-value database in the primary inspector table.
2. Locating Session Storage: Click the disclosure triangle next to Session Storage, and select the target origin to inspect ephemeral session variables.

The main inspector view presents a clean, sortable data table containing two primary columns: Key and Value.

Inspecting, Editing, and Deleting Storage Entries

1. Searching and Filtering Keys

Large web applications frequently store dozens of configuration strings, authentication tokens, and serialized JSON payloads. Use the Filter search box located in the top-right corner of the storage pane to isolate specific keys by name (e.g., typing auth or theme).

2. Modifying Key Values Live in the Browser

You can dynamically alter stored values to test how your web application responds to modified state parameters:

1. Double-click any entry inside the Value column.
2. The text cell becomes editable. Type your replacement value, boolean flag, or updated JSON string.
3. Press Enter to commit the change. The WebKit engine immediately writes the updated value to the active storage partition, firing the native storage event listener across the DOM.

3. Inserting New Key-Value Pairs

To inject a new storage variable into the client environment:

1. Double-click the empty space below the final row of the storage table.
2. Type a unique string in the Key column and press Tab.
3. Enter the corresponding string in the Value column and press Enter.

4. Deleting Specific Keys and Purging Entire Stores

• Deleting a Single Key: Click the target row in the storage table and press the Delete key on your Mac keyboard (or right-click the row and choose Delete).
• Purging All Keys (Clear Storage): To completely reset the client database, click the trash can icon labelled Clear All located in the upper-left corner of the Storage pane, or right-click the domain in the left sidebar and select Clear Local Storage.

Auditing Other Storage Mechanisms in Web Inspector

Beyond Local and Session Storage, Safari’s Storage tab allows developers to inspect adjacent client-side architectures:

Storage Subsystem	Typical Use Case	Debugging Capabilities in Safari
Cookies	HTTP session cookies, analytics tags, and tracking tokens.	Inspect HttpOnly, Secure, and SameSite flags; modify expiration dates.
IndexedDB	Structured NoSQL client-side database for large offline datasets.	Browse object stores, inspect indexes, and delete corrupted records.
Cache Storage	Service Worker cache for progressive offline web application assets.	Review cached network responses and invalidate stale asset bundles.