Local Storage Troubleshooting

Some of the exercises in this course use the Local Storage API (opens in new tab) to persist values across page reloads. Unfortunately, there are several potential issues here, which can lead to some very frustrating situations.

This guide explains how to troubleshoot the most common Local Storage issues.

Restricted access to Local Storage

The Local Storage API saves data onto your machine, like cookies. If you have strict privacy settings on your browser, this can lead to this API being blocked. You might be seeing an error like this:

Uncaught SecurityError
Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

You'll need to loosen the security settings in order to proceed. The setting in question is typically called something like “Block third-party cookies”. I found a quick guide (opens in new tab) that shows how to change this setting in Chrome.

Similarly, private/incognito modes often restrict web applications from accessing Local Storage. You'd need to switch to the “standard” browsing mode, in order for the Local Storage API to work correctly.

If you'd rather not enable third-party site data on your primary browser, I'd suggest using a secondary browser to complete this exercise.

Persisting invalid values

When working with Local Storage, it's possible to accidentally save an invalid value. This can lead to really confusing situations.

For example, consider the following code:

let value = undefined;
window.localStorage.setItem('some-value', value);


const savedValue = window.localStorage.getItem('some-value');

What do you expect savedValue to be?

Well, we set it to undefined… but, Local Storage can only store strings. That means it gets saved as the string "undefined". 😬

If you try and JSON.parse() this "undefined" string, you'll get an error:

SyntaxError: "undefined" is not valid JSON.

This is a particularly common situation because it's so easy to accidentally store an undefined value into Local Storage during development. The hot reloader can kick in and run your half-finished code, causing all sorts of invalid values to be saved into Local Storage.

This can lead to the baffling situation where you undo all the changes to the code, reverting it to the original exercise, but the error continues. This is because that faulty "undefined" string is still saved in Local Storage.

In order to fully restore things, you'll need to clear your browser's Local Storage.

Resetting Local Storage

The instructions vary slightly depending on your browser. We'll go over the instructions for the 3 most-commonly-used desktop browsers.

If you use a different browser, you should be able to find instructions for how to clear your browser's Local Storage.

Chrome

  • Open the Chrome DevTools (Ctrl + Alt + I).
  • Navigate to the Application tab.
  • In the left-hand sidebar, expand Local Storage. You should see one or more URLs.
  • Right-click the relevant URL, and select Clear.
    On this course platform, you'll want to select one of the https://sandpack-bundler.vercel.app/ links; this is the domain for the iframe that runs your code in the playgrounds.

Here's what this looks like:

screenshot of the Chrome devtools

Firefox

On Firefox, it's the same flow, except the tab in the devtools is called Storage instead of Application, and the menu option is called Delete All instead of Clear:

screenshot of the Firefox devtools

Safari

On Safari, it's the same flow, except the tab in the devtools is called Storage instead of Application. To clear the data, click the trash icon in the top-right corner:

screenshot of the Safari devtools