How It Works

This tool is a lightweight wrapper around the standard window.localStorage and window.sessionStorage APIs. You provide a list of keys (one per line), click Generate to initialize the editor, and the tool reads the current values from storage in your browser. You can then edit values, apply changes back to storage, and instantly see the effect in your app.

Step-by-step flow

• Pick a storage area: choose LocalStorage for persistent data or SessionStorage for per-tab session data.
• Enter keys: paste or type the keys you care about, one per line (feature flags, user preferences, cached payloads, etc.).
• Load values: the editor reads each key and shows its value in an editable field. If a key is missing, you will see a clear “missing” state.
• Edit and apply: modify values and apply changes—each key is written back with setItem exactly as entered.
• Export and import: copy or download a JSON mapping of key/value pairs, or import a JSON backup to restore a test setup quickly.

Key Features

Targeted key list (no noisy hunting)

Instead of scrolling through a long storage list in DevTools, you can focus on only the keys relevant to your current scenario. This is especially useful when your application stores dozens of items for caching, analytics, and UI state.

LocalStorage and SessionStorage support

Switch between storage areas depending on what you are testing. Many apps persist user settings in LocalStorage while keeping ephemeral session data in SessionStorage. This tool makes it easy to validate both.

Inline editing with safe feedback

Values are displayed in a monospace editor field and can be changed in place. After applying updates, the tool reports whether the write succeeded and refreshes the export view so you always know what is currently stored.

JSON export for reproducible tests

Export a snapshot of your selected keys as a single JSON object. You can paste that snapshot into a bug report, commit it as a fixture, or keep it as a “known good” setup for manual regression checks.

JSON import to restore a scenario quickly

Importing a JSON mapping lets you restore a test profile in seconds—handy when you frequently reset storage, switch browsers, or test multiple variants. You can choose to import and then apply changes immediately.

Use Cases

• Feature-flag toggling: flip flags stored in Web Storage to test UI branches without waiting for backend config changes.
• Onboarding and tutorials: reset “dismissed” or “completed” markers to verify first-run experiences repeatedly.
• A/B and experiment variants: force a specific variant key to reproduce inconsistent user reports and validate metrics tagging.
• Cached API payload inspection: view cached responses (often stored as JSON strings) to confirm freshness and edge-case data shapes.
• Authentication and impersonation flows: inspect tokens or session identifiers used in a test environment (never use this for sensitive production secrets).
• State corruption debugging: compare “expected” versus “actual” values when the app behaves oddly after multiple navigations.

In practice, the biggest advantage is speed: you can jump from a failing UI state to a clean, reproducible setup with a couple of clicks, then share the exact storage snapshot with teammates.

Optimization Tips

Use consistent key prefixes

If you control the app, adopting a predictable prefix (for example qa: or app:) makes it easier to target keys for debugging and avoid collisions with third-party scripts.

Store structured data as JSON (but validate)

Many teams store objects and arrays as JSON strings. That is fine for testing, but ensure you can parse and validate it in your code. When editing manually, keep formatting consistent and avoid trailing commas or invalid quoting.

Avoid putting secrets in Web Storage

Web Storage is convenient, but it is readable by JavaScript on the page. In production, do not store sensitive secrets there. For test environments, keep tokens short-lived and rotate them often.

Tip for teams: create a short “storage contract” document listing what each key means, which component owns it, and when it is safe to delete. When keys are well understood, you can edit state confidently during QA without introducing confusing leftovers that skew results.

Tip for performance: avoid storing very large payloads in Web Storage. Some browsers enforce quotas, and large string writes can block the main thread. Use this tool to spot unexpectedly big values and clean them up during testing.

FAQ