How to Edit Local Storage Data Using Browser DevTools

To edit a website’s local storage, open that site in your browser, open DevTools, select its origin under the browser’s storage tools, and change the key or value in the table. In Chrome, use Application > Storage > Local Storage; in Edge, use the Application tool; in Firefox, use Storage Inspector. Select the intended domain or origin before editing. In Chrome, refresh the page afterward to apply the change.

Local storage is a per-origin collection of string key/value pairs. It is commonly used by web applications to save data across browser sessions. Editing a value changes what is stored in the browser, but whether the site accepts it, uses it, or leaves it unchanged depends on the site’s code.

1. Edit local storage in Chrome

Open the website whose storage you want to inspect.
Open DevTools. You can use the browser’s DevTools menu or its keyboard shortcut for your operating system.
Open the Application panel. If it is not visible, open the DevTools panel selector and choose it.
In the sidebar, expand Storage, then Local Storage.
Select the site’s domain. Check the domain carefully, especially if the page uses subdomains.
Double-click the value cell you want to change, enter the new value, and press Enter.
Refresh the page so the application reads the edited value.

Chrome displays the entries as rows with key and value columns. To add a pair, double-click empty space in the table and enter the key and value. To remove one, select its row and press Delete. The panel also provides a Clear all action for clearing the selected origin’s entries.

Local storage entries belong to the selected site origin, so verify the domain before editing.

These changes affect browser storage for the selected origin. They do not update the website’s server-side database or another browser profile. Chrome’s guide explains that local storage saves data across browser sessions; clearing it can therefore reset site preferences or other client-side state.

2. Edit local storage in Microsoft Edge

Open the site in Edge, then open DevTools.
Select the Application tool.
Expand Local Storage and select the domain you want to inspect.
Double-click a Key or Value cell, make the change, and confirm it.

To add an entry, double-click an empty part of the table and enter the pair. To delete one, select it and use Delete or Delete Selected. Use Clear All to remove all local-storage entries for the selected domain. The Edge instructions describe these controls; they do not establish one refresh rule for every application. If the site does not reflect an edit, refresh it and check whether its code overwrites the value.

3. Edit local storage in Firefox

Open the site in Firefox and open Developer Tools.
Open Storage Inspector. If it is not shown, use the developer-tools panel menu to select it.
Select the origin’s Local Storage section.
Double-click the cell you want to edit, change the value, and confirm.

Use the plus button in the storage table to add a key/value entry. To delete an entry, use its context menu, or select it and press Delete or Backspace. Firefox’s documented workflow uses Storage Inspector rather than Chrome and Edge’s Application panel. Check the selected origin before changing or clearing anything.

4. Use the Console to read or change a value

The Console can inspect and modify storage through the page’s JavaScript context. In the Console for the site you want to work with, these expressions read a value, set one, remove one, and list the available keys:

// Read one value (returns null if the key is absent)
localStorage.getItem('theme');

// Set or replace a value
localStorage.setItem('theme', 'dark');

// Remove one key
localStorage.removeItem('theme');

// List the keys for this origin
Object.keys(localStorage);

// Clear all local storage for this origin
localStorage.clear();

Run these commands only after confirming the Console is executing in the intended page context. DevTools can expose more than one JavaScript context. If you are inspecting a different domain from the page initially displayed, select the appropriate context from the Console’s context menu. Otherwise, the expression may read or change storage for the wrong origin.

Use getItem and setItem rather than assuming that storage values are JavaScript objects. Web Storage stores strings. If an application stores JSON, parse and serialize it explicitly:

const raw = localStorage.getItem('preferences');
const preferences = raw ? JSON.parse(raw) : {};
preferences.theme = 'dark';
localStorage.setItem('preferences', JSON.stringify(preferences));

Only use that JSON example when the stored value is valid JSON and you understand its expected shape. A malformed value causes JSON.parse to throw. If a key contains a simple string, replace it as a string instead.

5. Common tasks and safe editing habits

Task	DevTools table	Console
Change a value	Double-click its Value cell and edit.	`localStorage.setItem('key', 'new value')`
Add a key	Chrome/Edge: double-click empty table space. Firefox: use the plus button.	`localStorage.setItem('new-key', 'value')`
Delete one key	Select its row and use Delete or the browser’s delete control.	`localStorage.removeItem('key')`
Clear this origin	Use the panel’s clear-all control.	`localStorage.clear()`

Record the original value before changing something you may need to restore.
Confirm the origin, including subdomain, before editing. Storage is associated with the selected site origin.
Change one entry at a time when debugging. That makes it easier to identify which edit affected the page.
Refresh when needed. Chrome explicitly says to refresh after an edit. On other browsers or applications, refresh if the interface does not update; the application may read storage only during startup.
Expect application validation. A site may reject, normalize, or replace a value. DevTools changes the stored string; it cannot force application code to accept it.
Avoid clearing everything casually. It can remove multiple preferences or client-side state for that origin.

An edited value may take effect after refresh, depending on when the site reads it.

6. Troubleshooting

The key is missing

Confirm that you selected the right origin and storage type. A site may use session storage, cookies, IndexedDB, or server-side state instead. Also check whether the application creates the key only after a particular action or sign-in.

The edited value appears to revert

The site may validate the value, overwrite it during initialization, or save a different value after you interact with the page. Reopen the storage table after refresh to see whether the value itself changed. If it did, inspect when the application writes it and whether the value format is expected.

The page does not respond to the change

Some applications read storage only when a page loads. Refresh after editing, especially in Chrome, whose documented instructions call for a refresh. If the change still has no effect, the application may not use that key for the behavior you expect.

The Console reports an error or shows an unexpected value

Check the selected JavaScript context and verify that the page is on the intended origin. A missing key returns null. JSON parsing fails for malformed JSON; inspect the raw string before parsing it. Storage access can also be unavailable in some browsing contexts, so use the site’s ordinary page context.

You cannot edit or delete the row you expected

Make sure the correct origin is selected and use the browser’s documented control: double-click a cell to edit; use the empty table area to add in Chrome or Edge; use Firefox’s plus button; select a row before deleting. Do not use a clear-all command unless clearing every local-storage entry for that origin is intentional.

7. Performance, reliability, and cost

For a few keys, the DevTools table or Console is direct and requires no additional service. The important reliability concern is choosing the right origin and understanding when the application reads and rewrites its values. Refreshing helps when the page reads storage at startup, but it does not make an unsupported value valid.

For repeated inspection across test pages, keep edits narrow and reproducible: note the origin, key, original value, new value, and whether a refresh was required. Avoid pasting commands that clear storage unless that is the specific goal. Browser DevTools does not incur an API charge; it is built into the browser.

If the broader task is capturing a page image after a state is ready, a screenshot API can avoid maintaining browser capture setup. ScreenshotNeo is a website screenshot API and MCP server; it is not a local-storage editor, and its screenshot request does not substitute for editing your browser profile.

Or skip the browser setup

When the goal is to capture a page rather than change its local storage, ScreenshotNeo can return a screenshot with one GET request. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, popups, and chat widgets are removed before the shot.
Bot checks, blank pages, and failed loads are never billed.
An MCP server lets AI agents take screenshots.
1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.

8. FAQ

Does changing local storage change data on the website’s server?

No. DevTools edits the browser’s local storage for the selected origin. A site may later sync, replace, or ignore a value according to its own behavior.

Will an edit survive closing and reopening the browser?

Local storage is designed to save data across browser sessions, but the site can remove or change its entries, and browser settings or profile changes can affect stored data.

Why do Chrome, Edge, and Firefox have different steps?

The browsers expose storage through different DevTools panels and controls. The underlying task is the same: select the origin, locate its local-storage entries, and edit the intended key/value pair.

Can I use these steps to change another person’s browser storage?

No. These instructions operate in the browser profile where DevTools is open. They do not remotely edit another user’s device or browser.