Skip to main content

How to Check if a Key Exists in localStorage using JavaScript

localStorage is a key part of the Web Storage API, allowing you to store key-value pairs that persist across browser sessions. A common task is to check if a specific key already exists in localStorage before you attempt to read from it or write to it. While there are several ways to perform this check, some are much more reliable than others.

This guide will teach you the standard and recommended method for checking for a key using localStorage.getItem(). You will also learn why other common methods, like the in operator, are unreliable and should be avoided.

The most direct and reliable way to check if a key exists is to try to retrieve its value with the localStorage.getItem() method.

The logic: The .getItem() method is designed with a specific behavior:

  • If the key exists, it returns the key's value (which is always a string).
  • If the key does not exist, it returns null.

Therefore, you can check for a key's existence by simply checking if the result of .getItem() is not null.

The Syntax:

localStorage.getItem('myKey') !== null

Basic Example: A Simple Key Check​

This script demonstrates how to set, check for, and remove a key from localStorage, using the recommended .getItem() method.

Consider the following HTML code:

<button id="btn-set">Set 'user' Key</button>
<button id="btn-check">Check for 'user' Key</button>
<button id="btn-remove">Remove 'user' Key</button>

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

This is the solution:

const setBtn = document.getElementById('btn-set');
const checkBtn = document.getElementById('btn-check');
const removeBtn = document.getElementById('btn-remove');

setBtn.addEventListener('click', () => {
  localStorage.setItem('user', 'John Doe');
  console.log("'user' key has been set.");
});

checkBtn.addEventListener('click', () => {
  // ✅ Check if the return value is NOT null
  if (localStorage.getItem('user') !== null) {
    console.log("The 'user' key EXISTS in localStorage.");
  } else {
    console.log("The 'user' key does NOT exist in localStorage.");
  }
});

removeBtn.addEventListener('click', () => {
  localStorage.removeItem('user');
  console.log("'user' key has been removed.");
});

Why Other Methods are Unreliable​

You may see other methods used online, but they have significant pitfalls that make them unsuitable for a robust check.

The Pitfall of the in Operator​

The in operator checks if a property exists on an object. While localStorage behaves like an object, it also has built-in properties and methods on its prototype. This leads to false positives.

Example of code with problems:

// These are built-in methods, not your data, but `in` says they exist.
console.log('getItem' in localStorage);    // Output: true
console.log('setItem' in localStorage);    // Output: true
console.log('clear' in localStorage);      // Output: true
console.log('length' in localStorage);     // Output: true
console.log('toString' in localStorage);   // Output: true

If a user tries to check for a key named "length", the in operator would incorrectly return true even if that key had never been set with setItem(). Because of this ambiguity, the in operator should not be used to check for the existence of your data.

A Note on hasOwnProperty()​

The localStorage.hasOwnProperty('myKey') method is a better alternative than the in operator because it only checks for keys that are "own properties" and ignores the inherited ones like toString.

// `hasOwnProperty` is more accurate than `in`.
console.log(localStorage.hasOwnProperty('getItem')); // Output: false
note

However, this method is still less explicit than .getItem(). The .getItem() method is the official API for interacting with localStorage, and its null return value is the documented, standard way to signal that a key does not exist. It is the most readable and idiomatic approach.

Conclusion​

While JavaScript provides several ways to inspect an object, the localStorage API has a specific method designed for this task.

The key takeaways are:

  1. The localStorage.getItem('myKey') method is the recommended best practice. It is unambiguous, explicit, and is the intended way to interact with the storage API.
  2. A return value of null definitively means the key does not exist.
  3. Avoid using the in operator, as it produces false positives by checking for built-in properties and methods.

Table of Contents