JavaScript Cookies — Update

What You’ll Learn

Updating a cookie means overwriting an existing entry with a new value or new attributes. This tutorial shows how that works with document.cookie, why path and domain must match, and how to refresh expiration safely.

Introduction

Cookies often need to change after they are first set—a user switches from light to dark theme, a cart ID gets refreshed, or a “remember me” session needs more time. JavaScript has no separate updateCookie() API on the browser; you update by writing again with matching scope attributes.

If you already know how to write (set) cookies, updating is the next step: same syntax, stricter rules about which existing cookie you are replacing.

What Does “Update” Mean for Cookies?

The browser stores each cookie as a tuple of name, domain, and path, plus value and flags. When a new assignment matches that tuple, the old entry is replaced. When it does not match—especially on path—you get a second cookie with the same name in a different scope.

You can update the value (e.g. theme=dark), the lifetime (max-age or expires), or security flags (Secure, SameSite) in one assignment.

📝 Syntax

Minimum update—change the value, keep scope identical:

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

// Update — same name and path
document.cookie = "username=JaneDoe; max-age=604800; path=/";

Refresh only the expiration (value unchanged):

document.cookie = "session=abc; max-age=3600; path=/";

// Slide the window forward another hour
document.cookie = "session=abc; max-age=3600; path=/";

Steps to update safely

1. Use the same cookie name as the one you want to replace.
2. Repeat the same path (and domain if you set it).
3. Include max-age or expires if the cookie should stay persistent.
4. Encode values with encodeURIComponent when they contain special characters.

Cookie Expiration and Path When Updating

When you update, the browser applies whatever attributes you send in that assignment. Omitting max-age or expires turns a previously persistent cookie into a session cookie that disappears when the tab or browser closes.

// Extend lifetime — keep path=/
document.cookie = "username=JaneDoe; max-age=1209600; path=/";

// WRONG for a site-wide cookie — creates a second username at /account
document.cookie = "username=JaneDoe; max-age=1209600; path=/account";

For expiration details see Expires & max-age. For path rules see Path attribute.

Examples Gallery

Use DevTools → Application → Cookies to confirm overwrites, or open the Try-it labs. Each example assumes a cookie was set first, then updated.

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

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

console.log(document.cookie); // username=JaneDoe

username=JaneDoe

const oneHour = 60 * 60;

document.cookie = "session=token-abc; max-age=" + oneHour + "; path=/; SameSite=Lax";

function touchSession() {
  document.cookie = "session=token-abc; max-age=" + oneHour + "; path=/; SameSite=Lax";
  console.log("Session expiration refreshed");
}

touchSession();

Session expiration refreshed

const thirtyDays = 30 * 24 * 60 * 60;

document.cookie = "theme=light; max-age=" + thirtyDays + "; path=/";

function setTheme(mode) {
  document.cookie = "theme=" + mode + "; max-age=" + thirtyDays + "; path=/";
  console.log("Theme updated to:", mode);
}

setTheme("dark"); // theme=dark

Theme updated to: dark

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

// Intended update — but path differs from original
document.cookie = "username=JaneDoe; max-age=604800; path=/account";

console.log(document.cookie);
// May show BOTH: username=JohnDoe and username=JaneDoe
// (browser sends the most specific match per request)

username=JohnDoe; username=JaneDoe

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

updateCookie("lang", "en-US", 604800);
updateCookie("lang", "fr-FR", 604800);

console.log(document.cookie); // lang=fr-FR

lang=fr-FR

🚀 Common Use Cases

• Theme / language switches — overwrite preference cookies on user choice.
• Sliding sessions — refresh max-age on each authenticated action.
• Cart quantity changes — update a lightweight cart summary cookie.
• Consent upgrades — change consent=essential to consent=all.
• A/B reassignment — rare, but sometimes buckets are updated after login.
• Feature flag toggles — flip boolean-like values client-side before server sync.

📝 Notes & Common Pitfalls

• Missing expiration — updating without max-age/expires downgrades persistent cookies to session cookies.
• Path mismatch — the most common reason an “update” appears to do nothing or creates duplicates.
• Size limits — values still capped at ~4 KB; oversized updates are rejected silently.
• HttpOnly — auth cookies set by the server cannot be updated from script; use an API instead.
• Encoding — if the original value was encoded, encode again on update for consistency.
• Reading is ambiguous — document.cookie may list multiple same-name cookies; parse carefully or inspect DevTools.

💡 Best Practices