Local Storage Editor Panel

WHAT IT DOES

Local Storage Editor Panel provides a comprehensive interface for viewing and managing localStorage data for the current domain. The panel displays all key-value pairs stored in the browser's localStorage, organized in a sortable, searchable table. You can add new items, edit existing ones, or delete individual entries with a single click. For JSON-structured data, the extension automatically parses and displays values in a readable format. The panel shows the total number of storage items and the total storage size used, helping you monitor storage usage. An export feature lets you backup all localStorage data as a JSON file, and an import feature allows you to restore data from a previously exported file. This is an essential tool for developers debugging web applications, QA engineers testing state persistence, and anyone who wants to inspect or modify site data.

WHERE IT RUNS

The extension works on every website with localStorage access, including complex single-page applications, traditional websites, and any page that stores data in localStorage. It runs locally in your browser, reading and writing data directly to the browser's localStorage API without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, a "📦 Storage" badge appears in the bottom-right corner of the page (if enabled). Click the badge to open the Local Storage Editor panel. The panel displays all localStorage items for the current domain in a sortable list. Click on any key or value to copy it to your clipboard. To filter items, type a search term into the search box—the list will update to show only matching keys or values. To add a new item, click the "+ Add" button and enter a key and value. To edit an item, click the edit (✎) button next to any entry, modify the key or value, and click "Save." To delete an item, click the delete (×) button. Use the "Refresh" button to reload the storage data. The "Export" button saves all localStorage data as a downloadable JSON file. The "Import" button lets you select a JSON file to restore data. The "Clear All" button deletes all localStorage items for the current domain (with confirmation).

THE ACTUAL MECHANISM — LOCALSTORAGE API ACCESS WITH JSON PARSING AND SORTABLE RENDER

The extension uses the browser's native localStorage API to read, write, and delete data. It iterates over all keys in `localStorage` using a for-in loop (with `hasOwnProperty` check), retrieving each value with `localStorage.getItem(key)`. For each item, it calculates the storage size as the sum of the key length and value length in bytes. If JSON display is enabled, the extension attempts to parse each value with `JSON.parse()`; if parsing succeeds, the value is marked as JSON and displayed in a formatted view. The data is rendered in a container with sortable columns (key or value) and a search filter that matches against both keys and values. The panel uses event delegation for buttons, with click handlers for edit, delete, copy, export, and import actions. The storage size is calculated by summing the byte length of all keys and values. The export feature serializes all data to a JSON object and creates a downloadable blob. The import feature reads a JSON file, parses it, and writes each key-value pair to localStorage. The extension listens for `storage` events to auto-refresh the panel when other tabs modify localStorage.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, open/close editor buttons, JSON view toggle, auto-refresh toggle, compact view toggle, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. The extension reads and writes data directly to localStorage using the browser's API. Modifying localStorage data can affect the behavior of the website you are visiting—use caution when editing or deleting items. The extension does not store or transmit any localStorage data externally; all data remains on your local device. The export feature creates a JSON file with all localStorage data for backup purposes; this file may contain sensitive information and should be handled accordingly. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.