Session Storage Viewer

What is a Session Storage Viewer?

A session storage viewer lets developers inspect the key-value data stored in the browser's sessionStorage for an origin and browser page session. A sessionStorage inspector or session storage editor can help find temporary state, debug multi-step workflows, inspect JSON payloads, and verify browser session storage without uploading the data.

How sessionStorage works

sessionStorage is part of the Web Storage API. Values are stored as strings. Access is limited to one origin (scheme + host + port) and to the current top-level browsing context — usually one tab. Reloading the page keeps the data. Closing that tab ends the page session. A new tab on the same origin starts empty.

Web pages can only access storage for the applicable origin. https://example.com and https://example.com/app share storage. https://app.example.com and http://example.com do not. If you need storage from another website, capture a snapshot in that site's own browser context and import it here.

How to Use the Session Storage Viewer

1. Use Live Storage on the origin you want to inspect, or import a snapshot for another site.
2. Review key count and estimated size.
3. Search keys or values, then filter JSON, strings, or empty values.
4. Select a key to inspect raw text or formatted JSON.
5. Edit or delete an entry when you are debugging.
6. Export JSON before clearing data.

How to view sessionStorage in Chrome and Edge

In Chrome, open DevTools, then Application → Storage → Session storage, and select the origin. That panel can inspect, filter, add, edit, and delete entries. Edge uses the same Application → Storage → Session storage path. This viewer adds snapshot import, comparison, CSV/JSON export, and a console snippet you run on the target site — it does not replace DevTools for live inspection of other origins.

sessionStorage vs localStorage

Need to inspect persistent browser data? Use the localStorage Viewer. Cookies are not Web Storage — inspect them with the Cookie Parser.

How Session Storage Data Is Read

The Web Storage API is synchronous. This viewer uses the same methods your app uses.

sessionStorage.getItem("key");
sessionStorage.setItem("key", "value");
sessionStorage.removeItem("key");
sessionStorage.clear();

for (let i = 0; i < sessionStorage.length; i++) {
  const key = sessionStorage.key(i);
  console.log(key, sessionStorage.getItem(key));
}

A snapshot you can copy from the target site's console:

JSON.stringify(
  Object.fromEntries(
    Array.from({ length: sessionStorage.length }, (_, i) => {
      const key = sessionStorage.key(i);
      return [key, sessionStorage.getItem(key)];
    })
  ),
  null,
  2
);

Examples

• Multi-step checkout: checkoutStep = "payment"
• Temporary form state: shippingStep = "2"
• Feature flags: {"newHeader":true,"checkoutV2":false}
• Login flow check: authState = "authenticated"

Developer workflows

• Debug a multi-step form without replaying every click.
• Compare snapshots before and after login.
• Export a test fixture, then restore it in Snapshot mode.
• Find a stale feature flag left from a previous visit.
• Verify session state after an in-tab navigation.

Need to format a stored JSON payload? Open the JSON Formatter. Need to confirm the string is valid first? Use the JSON Validator.

Different ways people use this viewer

Need to view sessionStorage?

Stay in Live Storage on this origin, or import a snapshot if the data lives on another site.

Need to edit sessionStorage?

Open a key, change the string value, and save. Live mode writes immediately. Snapshot mode stays in memory.

Need to export sessionStorage as JSON?

Copy JSON or download a snapshot that includes origin, URL, and timestamp when those are known.

Need to compare sessionStorage before and after a workflow?

Export once, run the flow, export again, then use Compare snapshots. For large JSON documents, the JSON Diff Tool can compare two files side by side.

Need to view sessionStorage in Chrome?

Use Application → Session storage for the page you are testing, or capture a snapshot and inspect it here.

Common mistakes

1. Assuming an external webpage can inspect every website. Same-origin policy blocks that.
2. Treating sessionStorage as a shorter-lived localStorage. Tabs and page sessions matter.
3. Forgetting that http and https, or a subdomain, are different origins.
4. Expecting a new tab to inherit another tab's sessionStorage.
5. Calling JSON.parse on every string. Many values are plain text.
6. Editing or clearing storage without an export.
7. Sharing a production snapshot that includes session identifiers.
8. Assuming every browser has a fixed 5 MB quota.
9. Using localStorage for data that should die with the tab.
10. Expecting a storage event across tabs. That event is for localStorage, not sessionStorage.

Frequently asked questions