How to view or edit localStorage?

Question

I created a Chrome extension and am using localStorage for storing data.

I am accessing localStorage through "background_page".

It works fine but how can I manually view its values? In Firefox you can use Firebug.

Anyone have any suggestions?

I have the same. Totally empty even though I can log them in javascript. Maybe because extension unpacked or whatever, but no usefull answer here yet. 2021-01-10. People don't seem to understand the question. — e-motiv
– e-motiv, Commented Jan 10, 2021 at 17:31

Giorgi Gzirishvili · Accepted Answer · 2017-08-02 05:41:05Z

339

It's simple. Just go to the developer tools by pressing F12, then go to the Application tab. In the Storage section expand Local Storage. After that, you'll see all your browser's local storage there.

edited Aug 2, 2017 at 5:41

Giorgi Gzirishvili

2632 silver badges7 bronze badges

answered Oct 9, 2012 at 11:28

user1613294

Sign up to request clarification or add additional context in comments.

5 Comments

Jim Aho Over a year ago

In Chrome version 60 you can't modify or add new items, you'll have to do it through the console and localStorage.setItem('key', 'value')

Rose Perrone Over a year ago

In Chrome version 65, you can manually modify and add new items. Double-click below the last key-value pair in the key-value list in Application > Local Storage to add a new value.

David 天宇 Wong Over a year ago

I dont' have an f12 key

Qwerty Over a year ago

@David天宇Wong You probably have F12 under Fn+ something. But you can also use Ctrl+Shift+I or three dots > More tools > Developer tools

Stop War Over a year ago

My F12 key is broken - so I use View -> Developer -> Developer Tools. :(

Simone · Accepted Answer · 2021-01-10 18:04:35Z

190

Open the Developer Tools by pressing F12.

Click on the Application tab and you will see localStorage's content. From there you can add/edit/delete the entries manually.

On OS X the keys are: ⌥ + ⌘ + i

Another combination: Ctrl + Shift + i

In Chrome it looks like this:

enter image description here

edited Jan 10, 2021 at 18:04

answered Feb 22, 2012 at 23:22

Simone

21.6k15 gold badges84 silver badges112 bronze badges

3 Comments

Joe Doe Over a year ago

Yep already tried that but localStorage is empty. Maybe because I loaded unpacked extension?

Simone Over a year ago

This may help you: stackoverflow.com/questions/3598669/…

Joe Doe Over a year ago

Simone, i know how to set and read localStorage with JS, but I need to manually edit/delete it

Ryan S · Accepted Answer · 2012-02-22 23:23:12Z

15

You can go to chrome://chrome/extensions and there will be a link to your background page that once you launch you can use the Dev Tools to see the localStorage stuff.

answered Feb 22, 2012 at 23:23

Ryan S

5531 gold badge4 silver badges11 bronze badges

3 Comments

Joe Doe Over a year ago

Thanks for answer @Ryan S but localStorage is empty I set it like this localStorage['xy'] = JSON.stringify(xy);

Ryan S Over a year ago

In the chrome console you can do localStorage.setItem('xy', JSON.stringify(xy)) and that will set the item in localStorage

khaled_webdev Over a year ago

do chrome://chrome-urls/, then local storage

Luke P. Issac · Accepted Answer · 2016-08-02 11:49:47Z

I am using chrome Version 52.0.2743.82 m currently. In this lastest version of chrome as of now, you can see the local storage values by launching "Developer Tools" and then looking into "Application" tab.

enigment · Accepted Answer · 2019-04-18 14:01:36Z

Either I don't understand what people here are trying to do, and it's not what I'm doing, and/or the Chrome developer tools have changed, and are broken in this regard.

My extension's content-script stores data like this:

chrome.storage.local.set(packet);

When I view the Application tab of the extension's background page, and expand Storage > Local Storage, I see my extension listed, but clicking on it shows no data.

The only solution I've found is to run this in the background page's console:

chrome.storage.local.get(null, function(data) {console.log(data);})

That's similar to how the extension reads it (except passing null to get all keys instead of a key name to get just the one I want) and it works fine, it's just awkward to type it out every time. It's also weird that there are all these answers here that don't work for me.

I'm using Chrome 73.0.3683.103 (Official Build) (64-bit) on Windows 10. The extension is still unpacked, if that's relevant, but that's the most likely time you'd want to do this, i.e., in development.

Thanks! That's what I was trying to know. I knew searching this, people'd generally assume browsers local-storage. BUT, localStorage ≠ chrome.storage.local
I'm currently using Chrome 86 and this seems to be the only way to do it. I've looked through all of the UI's available in the various Dev Tools and none of the data I set via my extension is accessible in those UI's. This must be a limitation of newer versions of Chrome.
Same -- unable to see it from extension's local storage from chrome dev tools/extension UI, I had to print out in background.js manually

Fractal Mind · Accepted Answer · 2024-07-08 18:54:14Z

0

Install this Chrome extension, you edit your local storage and cookies

answered Jul 8, 2024 at 18:54

Fractal Mind

4825 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to view or edit localStorage?

6 Answers 6

5 Comments

3 Comments

3 Comments

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

3 Comments

3 Comments

Comments

3 Comments

Comments

Linked

Related