JavaScript Cookies — Write (Set)

What You’ll Learn

Cookies let the browser remember small pieces of data between page loads. This tutorial shows how to write (create or set) cookies from JavaScript using document.cookie, including attributes that control lifetime, scope, and security.

Introduction

Cookies are small name–value strings the browser stores and sends back to the server on matching requests. They are useful for remembering UI preferences (theme, language), shopping-cart hints, or lightweight session markers—when used carefully.

In client-side JavaScript, you write cookies by assigning to document.cookie. Each assignment touches one cookie; it does not replace every cookie already stored for the site.

What Are Cookies?

A cookie is a key–value pair plus optional attributes (expiration, path, domain, security flags). The browser attaches eligible cookies to HTTP requests for the same origin, so both JavaScript and server code can cooperate on session state.

Cookies are limited to about 4 KB each and roughly 50 cookies per domain in most browsers—fine for tokens and preferences, not for large payloads. For bigger client data, consider localStorage or server-side storage.

📝 Syntax

Minimum form to create a cookie from JavaScript:

document.cookie = "username=JohnDoe";

Full form with common attributes (all separated by semicolons):

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

Writable attributes (from JavaScript)

• name=value — required pair that identifies the cookie.
• expires — UTC date string (e.g. from Date.toUTCString()).
• max-age — lifetime in seconds; often easier than expires.
• path — URL prefix where the cookie is sent (default is current path).
• domain — host scope (use carefully; cannot set for unrelated domains).
• Secure — cookie is sent only over HTTPS.
• SameSite — Strict, Lax, or None (with Secure).

Not settable from JavaScript

• HttpOnly — must be set by the server; blocks script access (good for auth tokens).

Setting Cookies for Specific Paths vs the Whole Site

The path attribute controls which URLs on your domain include the cookie. A cookie with path=/shop is sent to /shop, /shop/cart, and other URLs under that prefix—not to unrelated pages like /blog.

// Only URLs starting with /about receive this cookie
document.cookie = "tour=step2; path=/about";

// Every page on the site can read this cookie
document.cookie = "user=JohnDoe; path=/";

If you skip path, the browser defaults to the directory of the current page. That is a common reason a cookie “works here but not on the homepage.” For site-wide cookies, always set path=/.

Examples Gallery

Open DevTools → Application → Cookies to inspect results, or use the Try-it links. Each example builds on the last.

document.cookie = "username=JohnDoe";

// Reading shows this cookie among others (name=value pairs joined by "; ")
console.log(document.cookie);

username=JohnDoe

const sevenDays = 7 * 24 * 60 * 60;

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

console.log("Cookie set for 7 days");

Cookie set for 7 days

document.cookie = "cartId=abc123; path=/; max-age=86400";

// cartId is sent on /, /shop, /checkout, etc.

cartId visible on all pages under this origin

document.cookie = [
  "session=abc",
  "max-age=3600",
  "path=/",
  "Secure",
  "SameSite=Lax"
].join("; ");

// Secure cookies are ignored on plain http:// pages

On HTTPS: cookie stored with Secure + SameSite=Lax
On HTTP: Secure flag prevents storage

function setCookie(name, value, maxAgeSeconds) {
  const encoded = encodeURIComponent(value);
  let cookie = name + "=" + encoded + "; path=/; SameSite=Lax";
  if (typeof maxAgeSeconds === "number") {
    cookie += "; max-age=" + maxAgeSeconds;
  }
  if (location.protocol === "https:") {
    cookie += "; Secure";
  }
  document.cookie = cookie;
}

setCookie("greeting", "Hello, world!", 604800);
console.log(document.cookie);

greeting=Hello%2C%20world!

🚀 Common Use Cases

• UI preferences — theme, font size, or sidebar state (theme=dark).
• Consent banners — remember that the user accepted analytics (consent=1).
• Localization — store chosen language code for the next visit.
• Anonymous cart IDs — short-lived identifiers before login.
• A/B test buckets — sticky assignment to variant A or B.
• Feature flags — lightweight toggles shared with server routes.

Updating a Cookie While Writing

To change a value, write the same cookie name again. Include the same path (and domain if you used one) or the browser may create a second cookie with overlapping names.

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

// Only one username cookie remains for path=/

See also: Update cookies for focused coverage of expiration and attribute changes.

📝 Notes & Common Pitfalls

• Assigning document.cookie never clears unrelated cookies—only matches on name/path/domain update.
• Without path=/, cookies set on /js/cookies/write may not appear on /.
• Values with ; or = break parsing unless encoded.
• Each cookie is capped at ~4 KB; browsers drop oversized cookies silently.
• Never store passwords or raw JWTs in JavaScript-readable cookies when avoidable.
• HttpOnly cookies must be issued by the server—scripts cannot create them.

💡 Best Practices