Reading and Writing Cookies

The document.cookie quirk

document.cookie does not behave like a normal JavaScript property. It has two completely different behaviors depending on whether you read it or write to it.

Reading returns ALL cookies for the current page as a single semicolon-separated string:

// If three cookies are set:
console.log(document.cookie);
// "theme=dark; user=Alice; lang=en"

Writing sets (or updates) ONE cookie — it does not replace all cookies:

document.cookie = 'theme=light; Max-Age=86400; SameSite=Lax';
// Only theme is updated — other cookies are untouched

This asymmetry is the most surprising part of the cookies API. Writing to document.cookie is more like calling a setCookie() function than assigning to a string property.

The syntax for setting a cookie is a string with the name=value first, followed by optional attributes separated by semicolons:

// Session cookie (no Expires/Max-Age — deleted when browser closes)
document.cookie = 'demo_pref=dark; SameSite=Lax';

// Persistent cookie (survives browser restarts)
document.cookie = 'demo_pref=dark; Max-Age=86400; SameSite=Lax';

// Path-scoped cookie
document.cookie = 'demo_pref=dark; Max-Age=86400; Path=/app; SameSite=Lax';

Always include SameSite=Lax as a minimum for client-set cookies. Modern browsers default to Lax for cookies set without a SameSite attribute, but being explicit is safer.

Because reading document.cookie returns all cookies as one string, you need to parse it to find a specific cookie by name:

function getCookie(name) {
  var pairs = document.cookie.split('; ');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    if (pair[0] === name) return decodeURIComponent(pair[1]);
  }
  return null;
}

var theme = getCookie('demo_pref'); // 'dark' or null

Note the decodeURIComponent call — values set with encodeURIComponent must be decoded on read.

You cannot delete a cookie by assigning an empty string. You delete a cookie by setting it with Max-Age=0 (or an Expires date in the past):

function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=0; SameSite=Lax';
}

deleteCookie('demo_pref');

The complete helper pattern

Here is the full get/set/delete pattern used in production code:

function setCookie(name, value, maxAge) {
  document.cookie = name + '=' + encodeURIComponent(value) +
    '; Max-Age=' + maxAge + '; SameSite=Lax';
}

function getCookie(name) {
  var pairs = document.cookie.split('; ');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    if (pair[0] === name) return decodeURIComponent(pair[1]);
  }
  return null;
}

function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=0; SameSite=Lax';
}

Runnable demo: set, read, delete

Browser Storage

// Helper functions
function setCookie(name, value, maxAge) {
  document.cookie = name + '=' + encodeURIComponent(value) + '; Max-Age=' + maxAge + '; SameSite=Lax';
}
function getCookie(name) {
  var pairs = document.cookie.split('; ');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    if (pair[0] === name) return decodeURIComponent(pair[1]);
  }
  return null;
}
function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=0; SameSite=Lax';
}

// Demo: set -> read -> delete
setCookie('demo_user', 'Alice', 60);
console.log('Set demo_user=Alice');
console.log('Read:', getCookie('demo_user'));

deleteCookie('demo_user');
console.log('After delete:', getCookie('demo_user'));

Trade-offs

Option	Benefit	Cost
Writing one cookie at a time via `document.cookie`	Updates a single value without touching any other cookie, no need to manage the whole state at once	You must parse the string yourself every time you want to read a value by name — there’s no direct key-value API
Wrapping values with `encodeURIComponent`/`decodeURIComponent`	Prevents a semicolon or special character from breaking the parsing	One more step to remember every time — forget it on either side and the value reads back silently wrong

Common mistakes

Deleting a cookie by assigning an empty string (document.cookie = 'name=';) — this does not actually delete the cookie. You must set it again with Max-Age=0 (or an Expires date in the past) to delete it.
Forgetting encodeURIComponent when writing or decodeURIComponent when reading — a value containing a semicolon or special character breaks the ; -delimited parsing or comes back garbled.
Assuming document.cookie = 'a=1' clears all existing cookies and sets a new one — the write only updates the cookie named a. Any other existing cookies are untouched.