JavaScript Cookies

What You’ll Learn

Cookies let web apps remember preferences, sessions, and lightweight state between page loads. This hub covers 5 focused tutorials on writing, reading, updating, path scope, and expiration — plus security basics every beginner should know.

Introduction

Cookies are small text files the browser stores and attaches to HTTP requests for your site. They are ideal for session IDs, theme preferences, and “remember me” flags—not for large data (see localStorage for bigger client storage).

What Are Cookies?

Each cookie is a name=value pair plus optional attributes (path, max-age, Secure, SameSite). JavaScript reads and writes cookies through the document.cookie API. The server can also set cookies via the Set-Cookie response header.

Key Features

• Small size — about 4 KB per cookie; keep values short.
• Expiration — session cookies die with the tab; persistent cookies use max-age or expires.
• Scope — path and domain limit where the browser sends the cookie.
• Automatic sending — matching cookies ride along on every request to your server (unlike localStorage).

Storage Limitations

• ~4 KB per cookie value (rough limit; browsers may vary slightly).
• ~20–50 cookies per domain (browser-dependent).
• Same-origin rules — scripts on other domains cannot read your cookies.

📝 Syntax

Set a basic cookie:

document.cookie = "username=Ada";

// Persistent cookie — 7 days, site-wide path
document.cookie = "theme=dark; path=/; max-age=604800";

Common attributes

Cookie Security Considerations

• HttpOnly — set only by the server; JavaScript cannot read these cookies (good for session tokens).
• Secure — cookie sent only over HTTPS; add in production sites.
• SameSite — Strict, Lax, or None controls cross-site requests (CSRF mitigation).
• No secrets in JS-readable cookies — anything in document.cookie is visible to scripts on the page.
• Prefer short lifetimes — especially for authentication-related values.

Examples Gallery

Run these in the browser console or embed in a page. Check Application → Cookies in DevTools to verify results.

document.cookie = "username=Ada";
console.log(document.cookie);

username=Ada

function getCookie(name) {
  const prefix = name + "=";
  const parts = decodeURIComponent(document.cookie).split(";");

  for (const part of parts) {
    const trimmed = part.trim();
    if (trimmed.startsWith(prefix)) {
      return trimmed.slice(prefix.length);
    }
  }
  return "";
}

console.log(getCookie("username"));

Ada

function deleteCookie(name) {
  document.cookie = name + "=; path=/; max-age=0";
}

deleteCookie("username");
console.log(getCookie("username"));

(empty string — cookie removed)

const oneWeek = 7 * 24 * 60 * 60;

document.cookie =
  "theme=dark; path=/; max-age=" + oneWeek + "; SameSite=Lax";

Cookie "theme" → Value: dark, Max-Age: 604800, Path: /

function setCookie(name, value, days) {
  const maxAge = days * 24 * 60 * 60;
  document.cookie =
    encodeURIComponent(name) + "=" + encodeURIComponent(value) +
    "; path=/; max-age=" + maxAge + "; SameSite=Lax";
}

function getCookie(name) {
  const key = encodeURIComponent(name) + "=";
  const pairs = decodeURIComponent(document.cookie).split(";");
  for (const pair of pairs) {
    const trimmed = pair.trim();
    if (trimmed.startsWith(key)) {
      return trimmed.slice(key.length);
    }
  }
  return "";
}

function deleteCookie(name) {
  document.cookie =
    encodeURIComponent(name) + "=; path=/; max-age=0";
}

setCookie("username", "Ada", 365);
console.log(getCookie("username"));
deleteCookie("username");

Ada
(then cookie deleted)

💬 Usage Tips

• Always set path=/ for site-wide preferences unless you need a subdirectory scope.
• Encode values with encodeURIComponent when they contain special characters.
• Inspect in DevTools — Application tab → Cookies shows every attribute.
• Match attributes on delete — same path and domain as when created.
• Search this index — jump to any of 5 focused tutorials above.

⚠️ Common Pitfalls

• Duplicate cookies — different path values create two cookies with the same name.
• Storing passwords — never put credentials or JWTs in JS-readable cookies.
• Assuming HttpOnly from JS — only the server can set HttpOnly via Set-Cookie.
• Large payloads — cookies are not for big JSON blobs; use localStorage or the server.
• Third-party context — modern browsers restrict cross-site cookies; plan for SameSite rules.

💡 Best Practices