View existing local storage

If you want to check all localStorage values for the current web page, there are a couple of ways.

One way that I often find myself doing is running this little snippet of code. But it’s not the most accessible way.

for (let key in localStorage){
    let value = localStorage.getItem(key);
    try {
        value = JSON.parse(value);
    } catch(e) {}
    console.log(key + ': ', value)
}

The reason I like the above bit of code is that it parses any arrays and objects so that the console collapses them and highlights them in colours — So you can explore and read them easily.

Note: localStorage is isolated to each domain. So the above code will only show you the local storage for the domain and browser tab that it runs in. The same is true for the browser dev tools method below.

In Browser Dev Tools

You can also view them without running any code; In your browser’s dev tools. In all the browsers tested, you can click on a particular variable and be presented with a coloured and expandable version — But only one at a time.

Where to find the Local Storage section:

Chrome: Application tab / Local Storage
Arc: Application tab / Local Storage
Firefox: Storage tab / Local Storage
Safari: Storage tab / Local Storage

Annoyances

Annoyingly, there are a couple of quirks and some unhelpful, but expected, behaviour when viewing in browser dev tools.

Because the variables are live views of the data, if the variables change, they will update. This means that you may find it difficult to see their values from a specific point in time.
In Arc & Firefox, when one of the local storage variables update, they collapse the it’s tree. This makes it very difficult to monitor values if they’re changing and within an object.

Note: Arc is based off Chromium, but weirdly, Chrome doesn’t have the second issue described above.

That’s it!

In summary, you’re first port of call should probably be to just use the browser’s dev tools to check local storage when developing, however, if you need to view their values at a specific point in time (Or you don’t have access to the dev tools) you may want to revert to the console log method above.

Thanks…

I also dissect and speculate on design and development.
Digging into subtle details and implications, and exploring broad perspectives and potential paradigm shifts.
Check out my conceptual articles on Substack or find my latest below.

You can also find me on Threads, Bluesky, Mastodon, or X for more diverse posts about ongoing projects.