ReferenceError: localStorage is not defined in JS, Next.js

# ReferenceError: localStorage is not defined in JavaScript

The "ReferenceError: localStorage is not defined" occurs for multiple reasons:

Using localStorage in Node.js.
Using localStorage on the server (e.g. server-side rendering in Next.js).
Misspelling the localStorage global variable (should be camelCase).

referenceerror localstorage is not defined

shell

Copied!
ReferenceError: localStorage is not defined

The localStorage property is a property on the window object, so it isn't available on the server.

index.js

Copied!
console.log(localStorage === window.localStorage); // 👉️ true

localStorage.setItem('name', 'Tom');

console.log(localStorage.getItem('name')); // 👉️ "Tom"

If you got the error in the browser, make sure that you haven't misspelled the localStorage keyword (should be camelCase).

If you use React.js or Next.js and you need to check if you're on the browser (can use localStorage) or on the server (can't use localStorage), check that the window variable is not undefined.

index.js

Copied!
if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  // 👉️ can use localStorage here

  localStorage.setItem('name', 'Tom');

  console.log(localStorage.getItem('name')); // 👉️ "Tom"
} else {
  console.log('You are on the server')
  // 👉️ can't use localStorage
}

We check if the global window variable doesn't have a type of undefined. If the window variable is defined, we are on the browser and can use the localStorage API.

The if block runs only if we are in a browser environment and the window object is defined.

If you use React.js, you can also use localStorage in your useEffect hook or in an event handler.

App.js

Copied!
import {useEffect} from 'react';

export default function App() {
  useEffect(() => {
    console.log(localStorage.getItem('counter'));
  }, []);

  return (
    <div>
      <h2>hello world</h2>

      <button
        onClick={() => {
          localStorage.setItem('counter', 100);
        }}
      >
        Increment counter
      </button>
    </div>
  );
}

The useEffect() hook is only run on the browser and never runs on the server.

We also used the localStorage.setItem() method in an event handler which is also allowed.

The most commonly used localStorage methods are setItem() and getItem().

index.js

Copied!
// 👇️ adds the key and value to the localStorage object
localStorage.setItem('key', 'value')

// 👇️ returns the value of the specified key or null if the key doesn't exist
localStorage.getItem('key')

# ReferenceError: localStorage is not defined in Next.js

The "ReferenceError: localStorage is not defined" often occurs in Next.js applications when you try to access localStorage before the browser renders it.

This could be in the body of a React.js component.

App.js

Copied!
import {useState} from 'react';

export default function App() {
  // ⛔️ this would run before the browser is ready (BAD)
  const [name, setName] = useState(localstorage.getItem('name'))

  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
}

You can pass null as the initial value to the useState hook and access localStorage in your useEffect hook.

The useEffect hook runs after React renders your component in the browser environment, so you can safely use the localStorage API in useEffect.

App.js

Copied!
import {useEffect} from 'react';

export default function App() {
  useEffect(() => {
    console.log(localStorage.getItem('counter'));
  }, []);

  return (
    <div>
      <h2>hello world</h2>

      <button
        onClick={() => {
          localStorage.setItem('counter', 100);
        }}
      >
        Set counter
      </button>
    </div>
  );
}

If that doesn't work, you have to use an if statement to check if you're on the browser (can use localStorage) or server (can't use localStorage).

index.js

Copied!
if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  // 👉️ can use localStorage here

  localStorage.setItem('name', 'Tom');

  console.log(localStorage.getItem('name')); // 👉️ "Tom"
} else {
  console.log('You are on the server')
  // 👉️ can't use localStorage
}

# Conclusion

To solve the "ReferenceError: localStorage is not defined" error, make sure to only use the localStorage object in the browser.

The localStorage property is defined on the window object and is not available on the server, e.g. in Node.js or when using server-side rendering with Next.js.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

ReferenceError: localStorage is not defined in JS, Next.js

# ReferenceError: localStorage is not defined in JavaScript

# ReferenceError: localStorage is not defined in Next.js

# Conclusion

Borislav Hadzhiev