🔍 /

Browser Storage Inspector - Cache Header Builder

Inspect LocalStorage, SessionStorage, Cookies, and Cache API quotas. Generate optimized Cache-Control headers for SEO and performance.

User Rating 0.0 ★★★★★
Total Usage 0 times
Category Code Utilities
Storage Quota
0%
Used
Used: -
Total: -
Quick Summary
  • LS Items: 0
  • SS Items: 0
  • Cookies: 0
  • Cache Buckets: -
KeyValueSizeAction
KeyValueSizeAction
⚠️ Note: HttpOnly cookies are invisible to JavaScript.
URLTypeSize (Est)
Select a cache bucket above to inspect entries.
= 1 hour
Generated Header:
Cache-Control: public, max-age=3600
Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

This tool serves as a microscopic lens for your browser's client-side storage mechanisms. In modern web development, managing the client-side state is critical for performance and user experience. Browsers enforce strict Quotas on the amount of data an origin can store, typically ranging from 10 to 50 GB depending on the device and browser heuristic.

Understanding the distinction between LocalStorage (synchronous, persistent), SessionStorage (tab-scoped), and the Cache API (network request storage) is vital for debugging Progressive Web Apps (PWAs) and complex Single Page Applications. This utility allows you to inspect, visualize, and clear these data silos instantly.

Additionally, the integrated Cache-Control Architect generates valid HTTP headers. Misconfigured headers (e.g., missing immutable on static assets) are a primary cause of poor Core Web Vitals scores. This tool validates your caching strategy against industry best practices.

web cache localstorage viewer cookie inspector cache-control generator storage quota

Formulas

The browser storage quota usage is often calculated using the Storage Manager API. The usage percentage U is derived as:

U = used_bytesquota_bytes × 100

For HTTP Caching, the freshness_lifetime is determined by the max-age directive. If age is less than freshness_lifetime, the browser serves from cache:

is_fresh = current_age < max_age

Where max_age is defined in seconds (e.g., 31536000 for 1 year).

Reference Data

Storage TypePersistenceCapacity (Est.)ScopeAccess Speed
LocalStorageForever (until clear)5 MBOrigin (Tab Shared)Fast (Sync)
SessionStorageTab Lifetime5 MBTab OnlyFast (Sync)
CookiesSet by Expiry4 KBOrigin + ServerSlow (Network)
Cache APIForever (until clear)1 - 20 GBOrigin (Worker)Medium (Async)
IndexedDBForeverDisk QuotaOriginMedium (Async)

Frequently Asked Questions

Browsers enforce the Same-Origin Policy (SOP). This security feature prevents a script on one domain (like this tool) from accessing sensitive data (session tokens, cookies) belonging to another domain (like Facebook or your bank).
"no-store" forbids the browser from saving the response entirely. "no-cache" actually allows saving, but forces the browser to re-validate the content with the server (using ETag or Last-Modified) before showing it to the user.
It uses the native "navigator.storage.estimate()" API. The accuracy is high, but browsers may reserve "padding" space to prevent fingerprinting, so the exact byte count might be slightly obfuscated.
No. This tool operates 100% client-side. Your LocalStorage, Cookies, and Cache data remain in your browser. The tool strictly reads the DOM APIs to display the data on your screen.