Check if a key exists in localStorage using JavaScript

# Table of Contents

# Check if a key exists in localStorage using JavaScript

To check if a key exists in localStorage using JavaScript:

Use the localStorage.getItem() method to get the value of the key.
If the value of the key is not equal to null, then the key exists.
If the value of the key is equal to null, the key does not exist in localStorage.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <button id="set-key-btn">Set `website` key</button>

    <br />
    <br />

    <button id="delete-key-btn">Delete `website` key</button>

    <br />
    <br />

    <button id="check-key-btn">
      Check if `website` key exists
    </button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const setKeyButton = document.getElementById('set-key-btn');

setKeyButton.addEventListener('click', () => {
  localStorage.setItem('website', 'bobbyhadz.com');
});

// ---------------------------------------------

const deleteKeyButton =
  document.getElementById('delete-key-btn');

deleteKeyButton.addEventListener('click', () => {
  localStorage.removeItem('website');
});

// ---------------------------------------------

// ✅ Check if a localStorage key exists

const checkKeyButton = document.getElementById('check-key-btn');

checkKeyButton.addEventListener('click', () => {
  if (localStorage.getItem('website') !== null) {
    console.log('The website key exists');
    console.log(localStorage.getItem('website'));
  } else {
    console.log('The website key does NOT exist');
  }
});

Here is a short clip that demonstrates how the application works.

check if key exists in local storage

The code for this article is available on GitHub

If you need to open the app in your browser, open your terminal in the directory where your index.html file is located and run the following command.

shell

Copied!
npx serve .

We used the localStorage.getItem() method to check if a key exists.

The localStorage.getItem() method takes the name of the key as a parameter and returns the key's value if it exists or null if the key doesn't exist.

index.js

Copied!
const checkKeyButton = document.getElementById('check-key-btn');

checkKeyButton.addEventListener('click', () => {
  if (localStorage.getItem('website') !== null) {
    console.log('The website key exists');
    console.log(localStorage.getItem('website'));
  } else {
    console.log('The website key does NOT exist');
  }
});

The code for this article is available on GitHub

The if statement in the example above checks if the website key exists by checking if its value is not equal to null.

If you need to check if the key doesn't exist, check if the key's value is equal to null instead.

index.js

Copied!
const checkKeyButton = document.getElementById('check-key-btn');

checkKeyButton.addEventListener('click', () => {
  if (localStorage.getItem('website') === null) {
    console.log('The website key does NOT exist');
  } else {
    console.log('The website key exists');
    console.log(localStorage.getItem('website'));
  }
});

The if statement in the example checks if the website key doesn't exist in localStorage.

If the key exists, the else block runs.

# Don't use the `in` operator to check if a localStorage key exists

You might also see examples online that use the in operator to check if a localStorage key exists.

index.js

Copied!
const checkKeyButton = document.getElementById('check-key-btn');

checkKeyButton.addEventListener('click', () => {
  console.log('length' in localStorage); // 👉️ true
  console.log('constructor' in localStorage); // 👉️ true
  console.log('clear' in localStorage); // 👉️ true
  console.log('getItem' in localStorage); // 👉️ true

  if ('website' in localStorage) {
    console.log('The website key exists in localStorage');
  } else {
    console.log(
      'The website key does NOT exist in localStorage',
    );
  }
});

The code for this article is available on GitHub

However, the in operator gives false positives for values such as length, constructor, clear, getItem, etc.

This might not be what you want.

These are properties that appear on the prototype of the localStorage object.

Using the in operator is also more implicit than checking if the localStorage.get() method returned null.

# You can also use the `Object.hasOwnProperty()` method

You can also use the Object.hasOwnProperty() method to check if a localStorage key exists.

index.js

Copied!
const checkKeyButton = document.getElementById('check-key-btn');

checkKeyButton.addEventListener('click', () => {
  if (localStorage.hasOwnProperty('website')) {
    console.log('The website key exists in localStorage');
  } else {
    console.log(
      'The website key does NOT exist in localStorage',
    );
  }
});

The code for this article is available on GitHub

The example above checks if the website key exists in localStorage.

If the condition is met, the if block runs, otherwise, the else block runs.

The Object.hasOwnProperty() method returns a boolean that indicates whether the object has the specified property as its own property.

The method returns false for inherited properties (from the prototype).

If you need to check if a property doesn't exist in localStorage, use the logical NOT (!) operator.

index.js

Copied!
const checkKeyButton = document.getElementById('check-key-btn');

checkKeyButton.addEventListener('click', () => {
  if (!localStorage.hasOwnProperty('website')) {
    console.log(
      'The website key does NOT exist in localStorage',
    );
  } else {
    console.log('The website key exists in localStorage');
  }
});

The code for this article is available on GitHub

The logical NOT (!) operator flips the returned boolean and returns the result.

If the website property doesn't exist in localStorage, then the if block runs, otherwise, the else block runs.

I've also written an article on how to check if a Cookie exists using JavaScript.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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.

Check if a key exists in localStorage using JavaScript

# Table of Contents