JS Cookies

A cookie is a small piece of text a website asks the browser to remember, and the browser sends it back every time it asks that site for something. Cookies are how a site recognizes you between visits. JavaScript can read and write them through document.cookie, which is an unusual property with some odd behavior. This lesson covers how it works, the attributes that control a cookie, and the habits that keep them safe.

A note about the examples. Your code in the Try It editor runs on this site, so the cookies it makes belong to this site. Every example here uses names that start with demo_, limits the cookie to the /jsdemo/ folder, and deletes it at the end, so it cannot interfere with anything else.

// What a Cookie Is

• A cookie is a name and a value, both text, plus optional settings
• The browser stores it and sends it to the server with every request to that site
• It can be set by the server (in a response) or by JavaScript
• It lasts until it expires, or until the browser is closed if no expiry was given

// Reading Cookies

document.cookie returns all the cookies for the page as one string: each name=value pair separated by "; ". It never shows the settings, only the names and values:

document.cookie = "demo_a=1; path=/jsdemo/";
document.cookie = "demo_b=two; path=/jsdemo/";

const names = document.cookie.split("; ")
  .filter(pair => pair.startsWith("demo_"))
  .sort();
console.log(names);

document.cookie = "demo_a=; max-age=0; path=/jsdemo/";
document.cookie = "demo_b=; max-age=0; path=/jsdemo/";

// Writing a Cookie

Assign a name=value string to document.cookie. This looks like it should replace everything, but it does not: the browser adds or updates just that one cookie. It is the one place in JavaScript where assignment behaves like a method call.

document.cookie = "demo_user=Ava; path=/jsdemo/";
console.log(document.cookie.includes("demo_user=Ava"));

document.cookie = "demo_user=Ben; path=/jsdemo/";
console.log(document.cookie.includes("demo_user=Ava"));
console.log(document.cookie.includes("demo_user=Ben"));

document.cookie = "demo_user=; max-age=0; path=/jsdemo/";

// Settings That Control a Cookie

Settings follow the value, each separated by a semicolon:

Without max-age or expires a cookie is a session cookie: it disappears when the browser closes. The path matters more than it looks: a cookie set on one path is not visible on pages outside it, which is the usual cause of "my cookie vanished".

// Deleting a Cookie

There is no delete function. You overwrite the cookie with one that has already expired, using the same name and the same path. Setting max-age=0 does it:

document.cookie = "demo_user=; max-age=0; path=/jsdemo/";

If the path does not match the original, the browser treats it as a different cookie and the original stays.

// Special Characters: Encode the Value

A cookie value cannot contain semicolons, commas, or spaces without causing trouble. Wrap it in encodeURIComponent when you write and decodeURIComponent when you read:

const value = "a b;c";
console.log(encodeURIComponent(value));
console.log(decodeURIComponent("a%20b%3Bc"));

// Helper Functions

Working with the cookie string by hand is clumsy, so most code wraps it in three small functions:

function setCookie(name, value, days) {
  const seconds = days * 24 * 60 * 60;
  document.cookie = name + "=" + encodeURIComponent(value) +
    "; max-age=" + seconds + "; path=/jsdemo/";
}

function getCookie(name) {
  const pair = document.cookie.split("; ").find(row => row.startsWith(name + "="));
  return pair ? decodeURIComponent(pair.split("=")[1]) : null;
}

function deleteCookie(name) {
  document.cookie = name + "=; max-age=0; path=/jsdemo/";
}

setCookie("demo_theme", "dark & light", 7);
console.log(getCookie("demo_theme"));
console.log(getCookie("demo_nothing"));
deleteCookie("demo_theme");
console.log(getCookie("demo_theme"));

// Limits and Habits

• Each cookie is limited to about 4 KB, and a site gets a limited number of them
• Cookies are sent with every request, so big ones slow every page. Keep them small
• Never store passwords or private data in a cookie the user or a script can read
• The person can view, edit, and delete cookies, so never trust one for anything that must be secure
• Laws in many places (like GDPR in Europe) require telling visitors about non-essential cookies and getting their consent

// Quick Check

document.cookie = "theme=dark";

document.cookie = "demo_x=1; path=/jsdemo/";
console.log(typeof document.cookie);
document.cookie = "demo_x=; max-age=0; path=/jsdemo/";

// Try It

▶ Open Playground

1. Click Open Playground and run it. Run it a second time: what changed?
2. Change the lifetime to 1 day and read the cookie back
3. Store the text Ava & Ben in a cookie with the helpers and read it back
4. Delete the cookie and confirm that getCookie returns null