Browser Storage in Firefox: IndexedDB, Cookies, Storage Quotas, and DevTools Inspection

Browser storage APIs are complex. Firefox's DevTools Storage Inspector helps you see what's actually being stored, and there are important Firefox-specific behaviors around storage quotas, partitioning, and clearing.

The Storage Panel in Firefox DevTools

Open DevTools (F12) → Storage tab (may be labeled "Storage" in the panel tabs).

What the Storage panel shows:

• Cookies: All cookies for the current domain, including expiry, flags, value
• Local Storage: Key-value pairs in localStorage for the origin
• Session Storage: Key-value pairs in sessionStorage (cleared when tab closes)
• IndexedDB: Database list → Object stores → Records
• Cache Storage: Service worker caches with cached URLs and responses
• Shared Storage: New privacy-preserving API (Firefox 120+)

Cookies in the Storage Panel

Select a cookie to see:

• Name: The cookie key
• Value: The cookie value (some are base64-encoded or JSON)
• Domain: Which domain set it
• Path: URL path scope
• Expires/Max-Age: When it expires (empty = session cookie)
• HttpOnly: Can't be read by JavaScript
• Secure: Only sent over HTTPS
• SameSite: Cross-site sending behavior (None, Lax, Strict)
• Partition Key: If cookie is partitioned (Total Cookie Protection)

Right-click to delete: Select any cookie → right-click → delete.

Create cookies from DevTools: In the cookies panel, there's a "+" button to create a new cookie — useful for testing auth flows.

Total Cookie Protection and Partitioned Cookies

Firefox's Total Cookie Protection (enabled by default in Firefox 86+) partitions cookies by the top-level site.

What this means in Storage panel:
You'll see "Partition Key" column for some cookies. A cookie with partition key https://news-site.com means it was set while you were on news-site.com, and it will only be sent back to the third-party while you're on news-site.com.

Testing third-party cookies:
Visit a page that loads third-party content. The third party's cookies show with the partition key of the site you're on, not as global cookies.

localStorage and sessionStorage

// localStorage (persists across sessions)
localStorage.setItem('user-preferences', JSON.stringify({ theme: 'dark' }));
const prefs = JSON.parse(localStorage.getItem('user-preferences'));

// sessionStorage (cleared when tab closes)
sessionStorage.setItem('form-data', JSON.stringify(formValues));

In DevTools Storage panel:

• Local Storage → your origin → see all key-value pairs
• Click any entry to edit the value
• Right-click → delete to remove an entry

localStorage scope: Shared across all tabs for the same origin. Different tabs for the same site see the same localStorage.

sessionStorage scope: Per-tab. Two tabs on the same site have separate sessionStorage.

Firefox Container isolation: Local Storage is isolated per container. The same site in two different containers has separate localStorage. This is a key Container feature — forms and preferences don't leak between containers.

IndexedDB

IndexedDB is the full database API for browser storage — more complex than localStorage but supports:

• Larger data sets (up to browser limits)
• Indexed queries (not just key lookup)
• Transactions
• Object stores (like tables)

Storage panel for IndexedDB:
DevTools → Storage → IndexedDB → your-origin → database name → object stores

Click an object store to see records. Click any record to see its full value. You can delete individual records here.

// Basic IndexedDB usage
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('email', 'email', { unique: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  store.add({ id: 1, name: 'Alice', email: '[e-mail]' });
};

Debugging tip: IndexedDB operations are async. If you write data and don't see it in DevTools immediately, try refreshing the Storage panel (right-click → refresh).

Cache Storage (Service Workers)

Service worker caches appear in Storage → Cache Storage.

What you see:

• Cache names (you create these in your service worker)
• URLs cached
• Response status, headers, and body for each cached item

Clearing a specific cache:
Right-click the cache name → delete

Forcing a cache miss:
In the Network panel, check "Disable Cache" — bypasses service worker cache and loads from network.

Clearing service worker:
about:serviceworkers → find your site → unregister service worker
Next page load will re-register it.

Firefox Storage Quotas

Firefox allocates storage based on disk space. Rough estimates:

• localStorage: 5MB per origin (same as other browsers)
• sessionStorage: 5MB per origin
• IndexedDB: Up to 2GB per origin (or up to 50% of available disk if more requested via StorageManager API)
• Cache API: Up to 2GB per origin

Check storage quota:

const estimate = await navigator.storage.estimate();
console.log(`Used: ${estimate.usage} bytes`);
console.log(`Available: ${estimate.quota} bytes`);
console.log(`Percent: ${Math.round(estimate.usage / estimate.quota * 100)}%`);

Request persistent storage (prevents browser from evicting data):

const granted = await navigator.storage.persist();
console.log('Persistent storage:', granted);

Without persistent storage, Firefox may clear an origin's storage if it needs space. With persistent storage, it won't evict the data without user action.

Clearing Storage

Programmatically:

// Clear localStorage
localStorage.clear();

// Remove specific item
localStorage.removeItem('key');

// Clear sessionStorage
sessionStorage.clear();

// Clear all caches
const cacheNames = await caches.keys();
await Promise.all(cacheNames.map(name => caches.delete(name)));

// Clear IndexedDB database
const deleteRequest = indexedDB.deleteDatabase('myDatabase');

From DevTools: Right-click any storage type → clear all

From Settings: Settings → Privacy & Security → Cookies and Site Data → Manage Data → search for origin → remove

Firefox Clear Data dialog: Settings → Privacy → Clear Data → choose what to clear (cookies, local storage, cache, indexed data separately).

Storage Events

When localStorage changes in one tab, other tabs on the same origin receive a storage event:

window.addEventListener('storage', (event) => {
  console.log('Storage changed:', event.key, event.oldValue, event.newValue, event.storageArea);
});

Important: This fires in OTHER tabs, not the tab that made the change. Use this for cross-tab communication.

BroadcastChannel API: More explicit cross-tab messaging:

const channel = new BroadcastChannel('my-channel');
channel.postMessage({ type: 'user-logged-in', userId: 123 });

// In another tab:
channel.onmessage = (event) => {
  console.log('Received:', event.data);
};

Origin Private File System (OPFS)

Firefox 111+ supports the Origin Private File System — a virtual file system in the browser:

const root = await navigator.storage.getDirectory();
const fileHandle = await root.getFileHandle('data.json', { create: true });
const writable = await fileHandle.createWritable();
await writable.write(JSON.stringify(data));
await writable.close();

OPFS is for large files that don't fit well in IndexedDB. Useful for apps that need to store large datasets, blobs, or file-like structures.

DevTools support: OPFS appears in the Storage panel under "File System" in newer DevTools.

Summary

API	Scope	Capacity	Persistent	Use For
localStorage	Origin	5MB	Until cleared	User preferences, small data
sessionStorage	Tab	5MB	Until tab closes	Form state, temporary data
Cookies	Origin/Domain	4KB each	Until expiry	Auth tokens, small session data
IndexedDB	Origin	2GB+	Until cleared	Large structured data
Cache API	Origin	2GB+	Until cleared	Service worker response caching
OPFS	Origin	Available disk	Until cleared	Large files, binary data