JavaScript Document cookie Property

What You’ll Learn

Document.cookie is a read/write instance property (an accessor) that lets you read and write cookies for the current document. Learn the get vs set asymmetry, attributes like expires, max-age, path, SameSite, and Secure, how to parse and delete cookies, and five examples with try-it labs.

Introduction

Cookies are small name/value pieces of data the browser stores and may send back to the server on later requests. They are often used for preferences, analytics IDs, and (when set carefully by the server) session tokens.

document.cookie is how page scripts read cookies that are not marked HttpOnly, and how they set or update a single cookie at a time. MDN notes that reading cookies is a synchronous API and can block the main thread—prefer the asynchronous Cookie Store API when you need modern, non-blocking cookie management.

Related Document tutorials: contentType, characterSet, Document constructor.

Understanding Document.cookie

An instance property on Document that acts as both getter and setter for document-associated cookies.

• Getter — semicolon-separated key=value list (whitespace may surround keys/values; RFC 6265 prefers a space after each ;).
• Setter — assign "name=value" plus optional attributes; only one cookie per assignment.
• Attributes — domain, expires, max-age, path, samesite, secure, partitioned (MDN).
• Encoding — use encodeURIComponent() for values that may contain special characters.
• HttpOnly — not readable or writable from document.cookie.

📝 Syntax

// Read all visible cookies
document.cookie

// Set / update one cookie
document.cookie = "name=value; path=/; max-age=3600";

Value

A string of semicolon-separated cookies when reading. When writing, a string of the form key=value optionally followed by attribute pairs separated by semicolons.

Common attributes (when setting)

document.cookie =
  "theme=dark" +
  "; path=/" +
  "; max-age=" + (60 * 60 * 24 * 7) + // 7 days
  "; SameSite=Lax";
// Also: expires=UTCString, Secure, domain=..., partitioned

⚖️ Cookies vs other client storage

MDN: for client-only data, prefer DOM Storage (or IndexedDB) instead of stuffing more cookies onto every HTTP request.

📌 Cookie attributes (setter)

Examples Gallery

Examples follow MDN Document: cookie. Labs use same-site friendly attributes (no cross-origin SameSite=None). Use View Output or Try It Yourself for each case.

document.cookie = "name=Oeschger; path=/; SameSite=Lax";
document.cookie = "favorite_food=tripe; path=/; SameSite=Lax";

console.log(document.cookie);
// e.g. "name=Oeschger; favorite_food=tripe"
// (order and other site cookies may vary)

name=Oeschger; favorite_food=tripe

document.cookie = "test1=Hello; path=/; SameSite=Lax";
document.cookie = "test2=World; path=/; SameSite=Lax";

const cookieValue = document.cookie
  .split("; ")
  .find((row) => row.startsWith("test2="))
  ?.split("=")[1];

console.log(cookieValue); // "World"

World

const FLAG = "doSomethingOnlyOnce";

if (
  !document.cookie
    .split("; ")
    .find((row) => row.startsWith(FLAG + "="))
) {
  document.cookie =
    FLAG +
    "=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/; SameSite=Lax";
  console.log("First time — do the action!");
} else {
  console.log("Already done earlier.");
}

First time — do the action!

// Create then delete the same cookie (same path!)
document.cookie = "doSomethingOnlyOnce=true; path=/; SameSite=Lax";

document.cookie =
  "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax";

console.log("After delete:", document.cookie);

After delete: (flag cookie gone; other cookies may remain)

document.cookie = "reader=1; path=/; SameSite=Lax";

const hasReader = document.cookie
  .split(";")
  .some((item) => item.trim().startsWith("reader="));

const isOne = document.cookie
  .split(";")
  .some((item) => item.includes("reader=1"));

console.log('Cookie "reader" exists:', hasReader);
console.log('Value is "1":', isOne);

Cookie "reader" exists: true
Value is "1": true

🔒 Security notes (MDN)

• XSS can steal cookies visible to JavaScript (classic image/beacon exfiltration patterns).
• HttpOnly session cookies (set via Set-Cookie) cannot be read with document.cookie.
• path is not a strong security boundary—same-origin scripts can still reach cookies under other paths in some setups (MDN).
• Secure + careful SameSite reduce cross-site leakage.
• Never store secrets you would mind losing to XSS in a non-HttpOnly cookie.

🚀 Common Use Cases

• UI preferences — theme, language, dismissed banners (small values).
• First-visit flags — “do something only once” patterns.
• Analytics / consent — when product requirements use cookies (follow privacy laws).
• Legacy apps — reading cookies set by older server code.
• Not for large data — prefer localStorage / IndexedDB for client-only payloads (MDN).
• Auth tokens — prefer server-set HttpOnly + Secure cookies, not JS-writable ones.

📝 Notes

• MDN: Baseline Widely available — no Deprecated / Experimental / Non-standard banner.
• Synchronous API — can block; consider Cookie Store API for async work (MDN).
• One cookie per assignment; reading returns the whole visible list.
• Encode values with encodeURIComponent() when needed (MDN).
• More cookies → more request overhead; prefer storage APIs for client-only data.
• Related: contentType, characterSet, Document constructor.

💡 Best Practices