JavaScript Cookies

What Are Cookies?

Cookies are small name=value pairs the browser stores for a site. JavaScript reads and writes non-HttpOnly cookies through document.cookie. The server can also set them with Set-Cookie response headers.

document.cookie = "theme=dark; path=/; max-age=604800; SameSite=Lax"
document.cookie → "theme=dark; …"   // getter: all visible pairs

write  → one cookie per assignment
read   → parse the full string
delete → same path + max-age=0

How to Use Cookies

Treat cookies as a tiny lifecycle: write attributes carefully, parse on read, and match path when updating or deleting.

1. Write with name=value, path=/, and max-age when persistence matters.
2. Encode values with encodeURIComponent; decode when reading.
3. Parse document.cookie by splitting on ";" and the first =.
4. Delete by rewriting with max-age=0 and the same path.

Pseudocode

// WRITE
document.cookie = name + "=" + encode(value)
                 + "; path=/; max-age=SECONDS; SameSite=Lax"

// READ
for each part in document.cookie.split(";"):
    name, value = split on first "="
    if name matches: return decode(value)

// DELETE
document.cookie = name + "=; path=/; max-age=0"

Cheat Sheet

Keep these cookie facts handy.

Live Preview

Write, read, or delete a demo theme cookie in this browser, then inspect document.cookie.

Choose an action, then Run.

document.cookie → (current jar)

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

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

console.log(document.cookie);
// "theme=dark" (plus any other visible cookies)

theme=dark

function getCookie(name) {
  var parts = document.cookie.split(";");
  for (var i = 0; i < parts.length; i++) {
    var part = parts[i].trim();
    var eq = part.indexOf("=");
    if (eq === -1) continue;
    if (part.slice(0, eq) === name) {
      return decodeURIComponent(part.slice(eq + 1));
    }
  }
  return null;
}

document.cookie = "theme=dark; path=/; max-age=604800; SameSite=Lax";
console.log(getCookie("theme")); // "dark"

dark

document.cookie = "theme=dark; path=/; max-age=2592000; SameSite=Lax";
document.cookie = "theme=light; path=/; max-age=2592000; SameSite=Lax";

console.log(document.cookie);
// theme=light (same path → overwrite, not a second cookie)

theme=light

document.cookie = "theme=dark; path=/; max-age=604800; SameSite=Lax";
document.cookie = "theme=; path=/; max-age=0";

console.log(document.cookie);
// "theme=…" gone from the visible jar

(theme cookie removed)

Cookie Tutorials

Go deeper on each operation and attribute.

Performance Notes

MDN notes that document.cookie is synchronous. For modern async APIs, see the Cookie Store API.

Key Takeaways

• Role: use document.cookie to write one cookie and read the visible jar.
• Defaults: prefer path=/, max-age when persistent, and SameSite=Lax.
• Parse carefully: split on ";", trim, and split on the first =.
• Secrets: keep auth tokens HttpOnly on the server — not in JS-readable cookies.

One line: write with name=value; path=/; max-age=…; SameSite=Lax, parse to read, delete with max-age=0, and never store secrets in script-readable cookies.