How to View and Edit Web Data in Firefox Storage Inspector

The Firefox Storage Inspector is a built-in developer tool that allows you to inspect, modify, and delete various types of client-side web data stored by a webpage. This article provides a comprehensive overview of how to access the Storage Inspector and use its interface to view and manage Cookies, Local Storage, Session Storage, Cache Storage, and IndexedDB directly within the browser.

Accessing the Storage Inspector

To begin managing web storage, open the page you want to inspect in Firefox. You can open the Storage Inspector directly by pressing Shift + F9 on your keyboard. Alternatively, open the Firefox Developer Tools by pressing F12 (or Cmd + Opt + I on macOS, Ctrl + Shift + I on Windows/Linux) and click on the Storage tab at the top of the panel.

The Storage Inspector is divided into three main sections: the Storage Tree on the left (listing the storage types and origins), the Table Widget in the center (displaying the data), and the Sidebar on the right (showing parsed data for a selected item).

Managing Cookies

Cookies are small pieces of data sent from a website and stored on the user's computer.

  • Viewing: In the left pane, expand the Cookies node and click on the listed domain. The center table will populate with all cookies for that domain, displaying columns for Name, Value, Domain, Path, Expires, Size, HttpOnly, Secure, and SameSite. Clicking on any cookie opens the right-hand sidebar, which displays the value in an easy-to-read format, even parsing JSON-like structures automatically.
  • Editing: You can edit almost any attribute of a cookie directly. Double-click the cell you wish to change (such as the Name, Value, or HttpOnly status), type the new information, and press Enter to save it.
  • Adding and Deleting: To create a new cookie, click the + (Plus) button at the top of the table, which generates a default cookie row that you can immediately edit. To remove cookies, right-click a specific row and select Delete "Cookie Name", Delete All From "Domain", or Delete All Session Cookies.

Managing Local Storage and Session Storage

Local Storage and Session Storage store data as simple key-value pairs. Local Storage persists even after the browser is closed, while Session Storage is cleared when the page session ends. Because they function similarly, the Storage Inspector handles them the same way.

  • Viewing: Expand either Local Storage or Session Storage in the left pane and select the origin URL. The center table will display two columns: Key and Value. If a value contains complex data like a JSON object or an array, clicking the row will open the right-hand sidebar, presenting the data in an expandable, collapsible tree view.
  • Editing: To modify existing data, double-click either the Key or the Value cell in the center table. Input your changes and press Enter to apply them immediately to the browser's storage.
  • Adding and Deleting: Click the + button in the top toolbar of the Storage Inspector to insert a new key-value pair. To remove data, right-click on an entry and choose Delete "Key Name" or Delete All to wipe the storage for that origin completely.

Managing Cache Storage

Cache Storage is utilized by Service Workers to store network request and response pairs for offline use or faster loading times.

  • Viewing: Expand the Cache Storage node in the left pane. Below it, you will see the origin URL; expand this to view the individually named caches created by the website. Clicking a specific cache populates the center table with the cached URLs, alongside details like the response status (e.g., 200 OK), content type, and file size.
  • Editing and Deleting: Because Cache Storage holds complete network responses (like HTML files, images, and scripts), you cannot inline-edit the contents of a cached file via the table. However, you can manage the cache's state. Right-click any cached URL in the table and select Delete "URL" to remove that specific asset. You can also right-click the named cache in the left-hand tree and select Delete All to clear the entire cache container.

Managing IndexedDB

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files and blobs.

  • Viewing: In the left pane, expand the IndexedDB node. You will need to expand multiple levels: first the origin URL, then the specific Database name, and finally the Object Store (which is similar to a table in a traditional database). Selecting the database itself displays metadata like the version and object store count. Selecting an Object Store populates the center table with the stored Keys and Values. Clicking any row opens the right-hand sidebar to let you inspect the deeply nested JavaScript objects stored within that entry.
  • Editing and Deleting: The Firefox Storage Inspector does not currently support inline editing of IndexedDB values; modifications to existing values must be executed via JavaScript in the Web Console. However, you have full control over deleting data. Right-click a specific row in an Object Store to Delete "Key", or right-click the Object Store in the left pane and select Delete All to empty it. You can also right-click the database name in the left pane and select Delete "Database" to remove it entirely, provided the webpage does not have an active, blocking connection to it.