JavaScript Cookie Update

What Is Updating a Cookie?

Updating a cookie means writing again with the same name, same path (and domain, if used). There is no separate updateCookie() API — every update is another document.cookie assignment that overwrites the matching entry.

// create
document.cookie = "theme=light; path=/; max-age=2592000"

// update (same name + path + lifetime attrs)
document.cookie = "theme=dark; path=/; max-age=2592000"

same name + path  → overwrite
different path    → duplicate cookie
no max-age/expires → becomes session

How to Update Cookies

Match the cookie identity, rewrite the value, and re-apply path and lifetime.

1. Identify the cookie: same name, same path (usually /), same domain if set.
2. Assign a new document.cookie string with the new value.
3. Re-send max-age or expires if the cookie should stay persistent.
4. Verify with document.cookie or DevTools — a wrong path creates a second cookie.

Pseudocode

name, newValue = update target
path = original path            // usually "/"
seconds = original lifetime     // or new duration

cookie = name + "=" + encode(newValue)
cookie += "; path=" + path
if seconds is a number:
    cookie += "; max-age=" + seconds

document.cookie = cookie        // overwrite if identity matches

Cheat Sheet

Keep these update rules handy.

Live Preview

Seed a theme cookie, then update its value while keeping path=/ and a 30-day max-age.

Click “Seed theme=light”, then choose a value and “Update theme”.

document.cookie → (current jar)

JavaScript Examples

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

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
document.cookie = "username=JaneDoe; max-age=604800; path=/account";

console.log(document.cookie);
// May show BOTH username cookies

username=JohnDoe; username=JaneDoe

Performance Notes

Updates are cheap as assignments, but cookies ride on matching requests. Refresh max-age on meaningful activity, not on every tiny UI event.

Key Takeaways