Bookmarklets

Local Storage Explorer

bookmarklets Web Dev Debugging

The Local Storage Explorer bookmarklet is a powerful tool for inspecting and analyzing local storage and session storage data on any webpage.

Complete Storage Analysis

This bookmarklet provides a detailed view of all data stored in both localStorage and sessionStorage, helping you understand and debug client-side storage.

javascript:!function(){const t={localStorage:{},sessionStorage:{}};for(let e=0;e<localStorage.length;e++){const n=localStorage.key(e);try{t.localStorage[n]=JSON.parse(localStorage.getItem(n))}catch(e){t.localStorage[n]=localStorage.getItem(n)}}for(let e=0;e<sessionStorage.length;e++){const n=sessionStorage.key(e);try{t.sessionStorage[n]=JSON.parse(sessionStorage.getItem(n))}catch(e){t.sessionStorage[n]=sessionStorage.getItem(n)}}const e=document.createElement("div");e.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        width: 600px;\n        max-height: 80vh;\n        padding: 20px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10000;\n        overflow-y: auto;\n    ",e.innerHTML=`\n        <div style="margin-bottom: 15px;">\n            <strong>Local Storage Explorer</strong>\n            <button onclick="this.parentElement.parentElement.remove()" style="float:right;margin-left:10px;">×</button>\n        </div>\n        <div style="margin-bottom: 20px;">\n            <strong>Summary:</strong><br>\n            Local Storage Items: ${Object.keys(t.localStorage).length}<br>\n            Session Storage Items: ${Object.keys(t.sessionStorage).length}\n        </div>\n        <div style="margin-bottom: 20px;">\n            <h3 style="margin: 0 0 10px 0;">Local Storage</h3>\n            ${Object.keys(t.localStorage).length>0?`\n                ${Object.entries(t.localStorage).map((([t,e])=>`\n                    <div style="margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">\n                        <div style="margin-bottom: 5px;">\n                            <strong>Key:</strong> ${t}\n                        </div>\n                        <div style="margin-bottom: 5px;">\n                            <strong>Value:</strong>\n                            <pre style="margin: 5px 0 0 0; white-space: pre-wrap; word-break: break-all;">${JSON.stringify(e,null,2)}</pre>\n                        </div>\n                    </div>\n                `)).join("")}\n            `:'<div style="color: #666;">No items in Local Storage</div>'}\n        </div>\n        <div style="margin-bottom: 20px;">\n            <h3 style="margin: 0 0 10px 0;">Session Storage</h3>\n            ${Object.keys(t.sessionStorage).length>0?`\n                ${Object.entries(t.sessionStorage).map((([t,e])=>`\n                    <div style="margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">\n                        <div style="margin-bottom: 5px;">\n                            <strong>Key:</strong> ${t}\n                        </div>\n                        <div style="margin-bottom: 5px;">\n                            <strong>Value:</strong>\n                            <pre style="margin: 5px 0 0 0; white-space: pre-wrap; word-break: break-all;">${JSON.stringify(e,null,2)}</pre>\n                        </div>\n                    </div>\n                `)).join("")}\n            `:'<div style="color: #666;">No items in Session Storage</div>'}\n        </div>\n    `,document.body.appendChild(e)}();
Drag me to bookmark bar: 👉🏻 Local Storage Explorer

Why Use Local Storage Explorer?

The Local Storage Explorer bookmarklet is essential for web developers who need to inspect and debug client-side storage. It helps understand what data is being stored, verify storage operations, and troubleshoot storage-related issues.