JavaScript Cookies — Path Attribute

What You’ll Learn

The path attribute controls which pages on your site can send and read a cookie. This tutorial explains prefix matching, why path=/ is the usual default for app cookies, and how wrong paths cause “missing cookie” bugs.

Introduction

Cookies store name–value data, but attributes decide where that data applies. The path attribute is one of the most important—and most overlooked. Set it wrong and a cookie works on one page but vanishes on the homepage.

You set path when you write a cookie. You cannot read the path back from document.cookie, but it still governs every read and HTTP request.

What Are JavaScript Cookies?

Cookies are small strings the browser stores and attaches to HTTP requests for the same origin. JavaScript sets them through document.cookie, optionally adding attributes like max-age, Secure, SameSite, and path.

The path attribute defines a URL path prefix. The browser includes the cookie on requests whose path starts with that prefix (per cookie matching rules). It does not mean “only this exact page.”

Understanding the path Attribute

When you omit path, the browser uses the directory of the current document URL as the default. A cookie set on /js/cookies/path without an explicit path is scoped to that folder—not to / or /js automatically.

Explicit paths give you control:

• path=/ — every page on the origin (home, blog, checkout).
• path=/shop — /shop, /shop/cart, etc.
• path=/app/settings — only URLs under that settings section.

📝 Syntax

Set a cookie limited to a URL prefix:

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

Set a cookie for the entire site:

document.cookie = "sessionId=abc123; path=/; max-age=3600; SameSite=Lax";

Matching rule (simplified)

• Request path must be under the cookie’s path prefix to send the cookie.
• / matches all paths on the host.
• Narrower paths hide the cookie from unrelated sections (blog vs shop).

How the Cookie Path Affects Availability

The browser decides cookie visibility separately for JavaScript reads and HTTP requests, but both follow the same path rules. If the current page URL is not under the cookie path, document.cookie will not include that cookie.

• path=/ — sent on all same-origin requests.
• path=/shop — sent on /shop and deeper paths only.
• path=/app/settings — limited to that subtree.

When updating cookies, reuse the original path or you create a duplicate—see Update cookies.

Examples Gallery

Use DevTools → Application → Cookies to inspect path values. Try-it labs run on this page’s URL—compare scoped vs path=/ cookies.

document.cookie = "sessionId=abc123; path=/; max-age=3600; SameSite=Lax";

// Readable on /, /about, /shop/cart, and this tutorial page

sessionId visible on all pages under this origin

document.cookie = "cartId=xyz789; path=/shop; max-age=604800";

// Sent on /shop and /shop/checkout
// NOT sent on /blog or /account

On /js/cookies/path this cookie is NOT in document.cookie
(because /js/... is not under /shop)

// On https://example.com/js/cookies/path — no path attribute
document.cookie = "prefs=compact; max-age=604800";

// Default path ≈ /js/cookies/
// Cookie missing on https://example.com/ and /js/

Cookie works here but "disappears" on the homepage

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

// Attempted "update" with wrong path
document.cookie = "username=Jane; path=/account; max-age=604800";

// DevTools may show TWO username cookies
// document.cookie on / lists both when paths match current URL

username=John; username=Jane

function setCookieWithPath(name, value, cookiePath, maxAgeSeconds) {
  const encoded = encodeURIComponent(value);
  const path = cookiePath || "/";
  let cookie = name + "=" + encoded + "; path=" + path + "; SameSite=Lax";
  if (typeof maxAgeSeconds === "number") {
    cookie += "; max-age=" + maxAgeSeconds;
  }
  document.cookie = cookie;
}

setCookieWithPath("theme", "dark", "/", 604800);
setCookieWithPath("cartId", "item-42", "/shop", 86400);

theme readable here (path=/)
cartId hidden on this page (path=/shop)

🚀 Common Use Cases

• Global preferences — path=/ for theme and language.
• Store cart — path=/shop isolates commerce data.
• Admin panels — path=/admin limits admin flags to staff URLs.
• Multi-app hosts — separate paths per mounted app on one domain.
• Staging vs prod — keep path conventions identical across environments.
• Debugging — compare path column in DevTools when cookies “vanish.”

📝 Notes & Common Pitfalls

• Forgetting path=/ — cookies stuck in one directory; classic “works on this page only” bug.
• Too narrow — /app/settings excludes /app/dashboard.
• Path change on update — creates duplicates instead of overwrites.
• Script cannot read path — use DevTools to audit scope.
• domain vs path — path controls URL prefix; domain controls host (advanced, use carefully).
• Environment drift — different base paths in dev/staging break cookie sharing.

💡 Best Practices