JavaScript Cookies — Expires & max-age

What You’ll Learn

Cookie lifetime controls how long data survives in the browser. This tutorial covers expires and max-age, session cookies, deleting expired entries, and keeping persistence when you update values.

Introduction

Without a lifetime attribute, cookies die when the browser session ends. With expires or max-age, they become persistent—surviving restarts until they expire or you delete them.

Choosing the right lifetime balances convenience (remember my theme) against privacy and security (short-lived session tokens). Always pair lifetime attributes with path=/ unless you intentionally scope narrower—see Path attribute.

What Are Cookies in JavaScript?

Cookies store small name–value pairs via document.cookie. They can hold preferences, cart hints, or consent flags—not passwords or raw auth secrets in script-readable form.

Lifetime is controlled by optional attributes:

• Neither set — session cookie (temporary).
• expires — absolute expiry instant in UTC text form.
• max-age — relative lifetime in seconds (recommended).

📝 Syntax

Persistent cookie with expires (7 days from now):

const date = new Date();
date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();

document.cookie = "username=JohnDoe; " + expires + "; path=/";

Same duration with max-age (preferred):

const sevenDays = 7 * 24 * 60 * 60;

document.cookie = "username=JohnDoe; max-age=" + sevenDays + "; path=/";

Session cookie (no lifetime attributes):

document.cookie = "flash=seen; path=/";

How Cookie Expiration Works

When a cookie expires—by time or explicit deletion—the browser removes it. Expired cookies do not appear in document.cookie and are not sent on HTTP requests.

Reading cookies returns values only; you cannot ask JavaScript when a cookie expires. Use DevTools or server logs for auditing lifetimes.

When updating, re-send max-age or expires. Omitting them converts a persistent cookie into a session cookie.

Reading Cookies (Without Expiration Info)

document.cookie never includes expiry metadata. To read values, use a parser from the Read cookies guide:

console.log(document.cookie); // "username=JohnDoe" — no expires shown

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) {
      return trimmed.slice(eq + 1);
    }
  }
  return null;
}

If getCookie returns null, the cookie may be expired, scoped to another path, HttpOnly, or never set.

Examples Gallery

Inspect cookies in DevTools → Application → Cookies (Expires / Max-Age column). Try-it labs demonstrate each lifetime pattern.

function setCookieExpires(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + encodeURIComponent(value) +
    "; expires=" + date.toUTCString() +
    "; path=/; SameSite=Lax";
}

setCookieExpires("username", "JohnDoe", 7);
console.log(document.cookie);

username=JohnDoe

const sevenDays = 7 * 24 * 60 * 60;

document.cookie = "prefs=compact; max-age=" + sevenDays + "; path=/; SameSite=Lax";

// Refresh sliding session — same max-age resets the countdown
document.cookie = "prefs=compact; max-age=" + sevenDays + "; path=/; SameSite=Lax";

prefs=compact (expires in 7 days from last write)

document.cookie = "flashBanner=dismissed; path=/";

// No max-age or expires → session cookie
console.log(document.cookie);

flashBanner=dismissed

document.cookie = "username=JohnDoe; max-age=604800; path=/";

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

deleteCookie("username");
console.log(document.cookie); // username gone

(empty or other cookies only)

function setCookieWithExpiry(name, value, days) {
  const encoded = encodeURIComponent(value);
  let cookie = name + "=" + encoded + "; path=/; SameSite=Lax";
  if (typeof days === "number" && days > 0) {
    cookie += "; max-age=" + (days * 24 * 60 * 60);
  }
  document.cookie = cookie;
}

setCookieWithExpiry("username", "JohnDoe", 7);  // persistent
setCookieWithExpiry("flash", "ok");            // session (no days)

username=JohnDoe; flash=ok

🚀 Common Use Cases

• Remember me — 30-day max-age for display name (not passwords).
• Consent banner — 1-year persistence for analytics consent.
• Flash messages — session cookie to hide a one-time alert.
• Sliding sessions — refresh hourly max-age on activity.
• Logout — delete auth-related cookies with max-age=0.
• Short-lived carts — 7-day expiry for anonymous cart IDs.

📝 Notes & Common Pitfalls

• Bad date format — non-UTC expires strings may be ignored.
• Timezone confusion — prefer max-age over manual date strings.
• Update without expiry — downgrades persistent cookies to session cookies.
• Delete path mismatch — max-age=0 must use the same path as the original.
• No expiry in reads — document.cookie hides expiration metadata.
• Negative max-age — treated as delete (0 or past expiry).

💡 Best Practices