JavaScript Cookies — Read

What You’ll Learn

Reading cookies means parsing the document.cookie string to recover stored values. This tutorial covers the raw API, a reliable getCookie helper, decoding, parsing every cookie into an object, and pitfalls beginners hit.

Introduction

After you write cookies, pages need to read them back—to apply a dark theme, restore language choice, or show a greeting. JavaScript exposes cookies through one property: document.cookie.

Unlike localStorage, there is no getItem(name) built in. You read the entire visible cookie string and parse the name you need.

What Are Cookies?

Cookies are small name–value pairs stored by the browser and sent with HTTP requests. From JavaScript you only see cookies that are not marked HttpOnly and that match the current document’s URL scope.

When you read document.cookie, you get a single string like "username=JohnDoe; theme=dark"—names and values only, never expires, path, or Secure metadata.

Why Read Cookies?

• Personalization — restore theme, font size, or language on page load.
• Client hints — read non-sensitive flags like consent=1 or cart IDs.
• UI state — show “Welcome back” when a display name cookie exists.
• Debugging — log visible cookies while building write/update flows.

Avoid relying on JavaScript-readable cookies for authentication secrets—use HttpOnly server cookies instead. Scripts should treat readable cookie values as untrusted user-controlled input.

📝 Syntax

Read every cookie visible to the current page:

const allCookies = document.cookie;
console.log(allCookies); // "username=JohnDoe; theme=dark"

Reliable getCookie helper (split on first = only):

function getCookie(name) {
  const pairs = document.cookie.split(";");
  for (const pair of pairs) {
    const trimmed = pair.trim();
    const eq = trimmed.indexOf("=");
    if (eq === -1) continue;
    const key = trimmed.slice(0, eq);
    const value = trimmed.slice(eq + 1);
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return null;
}

Return value

• String — decoded cookie value when the name is found.
• null — when no matching cookie exists or it is not visible to script.

Handling Special Characters

Values stored with encodeURIComponent look like Hello%2C%20world. Always decode on read when your write path encodes:

// Written earlier as:
// document.cookie = "greeting=" + encodeURIComponent("Hello, world!") + "; path=/";

const greeting = getCookie("greeting");
console.log(greeting); // "Hello, world!"

If decoding throws on malformed sequences, wrap in try/catch and fall back to the raw string for robust apps.

Examples Gallery

Open DevTools Console or use Try-it labs. Examples seed cookies first so reads return meaningful output.

document.cookie = "username=JohnDoe; path=/";
document.cookie = "theme=dark; path=/";

console.log(document.cookie);
// "username=JohnDoe; theme=dark" (order may vary)

username=JohnDoe; theme=dark

function getCookie(name) {
  const pairs = document.cookie.split(";");
  for (const pair of pairs) {
    const trimmed = pair.trim();
    const eq = trimmed.indexOf("=");
    if (eq === -1) continue;
    const key = trimmed.slice(0, eq);
    const value = trimmed.slice(eq + 1);
    if (key === name) return value;
  }
  return null;
}

document.cookie = "username=JohnDoe; path=/";
console.log(getCookie("username")); // JohnDoe
console.log(getCookie("missing"));  // null

JohnDoe
null

function getCookie(name) {
  const pairs = document.cookie.split(";");
  for (const pair of pairs) {
    const trimmed = pair.trim();
    const eq = trimmed.indexOf("=");
    if (eq === -1) continue;
    const key = trimmed.slice(0, eq);
    const value = trimmed.slice(eq + 1);
    if (key === name) {
      try {
        return decodeURIComponent(value);
      } catch {
        return value;
      }
    }
  }
  return null;
}

document.cookie = "greeting=" + encodeURIComponent("Hello, world!") + "; path=/";
console.log(getCookie("greeting")); // Hello, world!

Hello, world!

function getAllCookies() {
  const result = {};
  if (!document.cookie) return result;

  for (const pair of document.cookie.split(";")) {
    const trimmed = pair.trim();
    const eq = trimmed.indexOf("=");
    if (eq === -1) continue;
    const key = trimmed.slice(0, eq);
    const raw = trimmed.slice(eq + 1);
    try {
      result[key] = decodeURIComponent(raw);
    } catch {
      result[key] = raw;
    }
  }
  return result;
}

document.cookie = "username=JohnDoe; path=/";
document.cookie = "theme=dark; path=/";

console.log(getAllCookies());
// { username: "JohnDoe", theme: "dark" }

{ username: "JohnDoe", theme: "dark" }

function getCookie(name) {
  const pairs = document.cookie.split(";");
  for (const pair of pairs) {
    const trimmed = pair.trim();
    const eq = trimmed.indexOf("=");
    if (eq === -1) continue;
    if (trimmed.slice(0, eq) === name) {
      try {
        return decodeURIComponent(trimmed.slice(eq + 1));
      } catch {
        return trimmed.slice(eq + 1);
      }
    }
  }
  return null;
}

document.cookie = "username=JohnDoe; path=/";
document.cookie = "theme=dark; path=/";

const username = getCookie("username") || "Guest";
const theme = getCookie("theme") || "light";

console.log("Welcome, " + username + "!");
console.log("Theme: " + theme);

Welcome, JohnDoe!
Theme: dark

🚀 Common Use Cases

• Theme on load — read theme before painting the page.
• Language selection — pick locale strings from a lang cookie.
• Consent gating — skip the banner when consent is already set.
• Returning visitor UX — show a name from a display cookie (non-sensitive).
• Debug panels — dump getAllCookies() during development.
• Form prefill hints — restore non-sensitive defaults saved earlier.

📝 Notes & Common Pitfalls

• Case-sensitive names — Theme and theme are different keys.
• Expired cookies — absent from document.cookie; no error is thrown.
• Split trap — never use split("=") on the whole pair; split on the first equals sign only.
• HttpOnly — session tokens stored securely are invisible to getCookie.
• Duplicate names — different paths can produce confusing reads; normalize writes with path=/.
• Security — never trust cookie values for authorization without server validation.

💡 Best Practices