What is Local Storage Viewer
The Local Storage Viewer is a client-side browser inspection tool that reads and displays every key-value pair currently stored in the browser's localStorage for the current origin (protocol + domain + port). When you open the tool, it immediately scans localStorage using the Storage API's key() and getItem() methods, building a complete inventory of all stored data. The output is rendered as a table with three columns: the key name (in monospace font), the value (truncated to prevent overflow), and the byte size of the value (calculated using the TextEncoder API for accurate UTF-8 byte counting). The table header shows the total number of entries, and if localStorage is empty, a message is displayed instead. This tool is essential for debugging web applications that use localStorage for caching, user preferences, authentication tokens, or any client-side state — it gives you an immediate, human-readable view of what the browser is actually storing.
How to Use Local Storage Viewer
- Step 1: Open the Local Storage Viewer tool. The tool immediately scans localStorage on load and displays all entries in a table.
- Step 2: Review the table: each row shows a key name, its stored value, and the byte size. The key column uses monospace font for alignment, and the value column is truncated for long values.
- Step 3: Note the total entry count displayed in the header. This tells you how many items are currently stored in localStorage for this origin.
- Step 4: To modify the data, use the Local Storage Manager tool which provides edit and delete capabilities.
Why Use Local Storage Viewer
localStorage is invisible by default — there is no browser UI that shows all stored key-value pairs in one place. DevelopersTools > Application > Local Storage in DevTools works, but this tool provides a quicker, focused view without navigating DevTools panels. It is particularly useful during development when you need to quickly verify that your application is storing the correct values, when debugging issues related to stale or corrupted cached data, or when auditing what a third-party script has stored in your origin's localStorage. The byte-size column is especially valuable because localStorage has a storage limit (typically 5-10MB per origin), and seeing the size of each entry helps identify which items are consuming the most space.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.
Frequently Asked Questions
Does this show localStorage from other origins?
<p>No. The tool only shows localStorage entries for the current origin (the protocol, domain, and port of this page). Cross-origin localStorage is isolated by the browser's same-origin policy and cannot be accessed.</p>
Does it update in real time?
<p>The tool scans localStorage once on load. If you add or remove entries from another tab or via DevTools, refresh the page to see the updated state.</p>
What is the storage limit?
<p>Most browsers allow 5-10MB of localStorage per origin. The byte-size column helps you track usage, but the total limit is enforced by the browser, not by this tool.</p>
Can I see storage usage statistics?
<p>The tool shows individual entry sizes but not total usage. For total localStorage usage, check the browser DevTools Application tab or use the Storage Manager API (navigator.storage.estimate()).</p>
Does it detect values stored by third-party scripts?
<p>Yes. The tool reads all localStorage entries for the current origin regardless of which script stored them. If a third-party analytics or advertising script has stored data, it will appear in the list.</p>