JavaScript Document cookie Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word COOKIE

Definition

Document.cookie lets you read and write cookies for the current document (MDN). Reading returns a semicolon-separated list of name=value pairs. Assigning sets or updates one cookie at a time.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.cookie. Start with this line.

JavaScript
document.cookie = "name=Oeschger; path=/; SameSite=Lax";
CallWhat it does
document.cookie = "name=Oeschger; path=/; SameSite=Lax";Primary signature.

Built into the browser. Read or assign document.cookie — no import required.

Library declarations
JavaScript
document.cookie = "name=Oeschger; path=/; SameSite=Lax";

Parameters

ParameterDescription
name=valueRequired. Cookie pair to set or update
path / expires / SameSiteOptional. Scope, lifetime, and send rules

Return Value

Return ValueDescription
*The current value of document.cookie.

JavaScript Examples

Example 1 — Set Cookies and Show Them

Assign one cookie at a time, then read the combined string (MDN-style).

JavaScript
document.cookie = "name=Oeschger; path=/; SameSite=Lax";
document.cookie = "favorite_food=tripe; path=/; SameSite=Lax";

console.log(document.cookie);
// e.g. "name=Oeschger; favorite_food=tripe"
Try It Yourself

How It Works

  1. Write twice. Each assignment updates one cookie name.
  2. Add attributes on write. path=/ and SameSite=Lax scope how the cookie is stored/sent.
  3. Read once. The getter returns all script-visible cookies as one string.
  4. Expect extras. Other cookies on the same site may also appear in the string.

Example 2 — Read One Cookie by Name

Split the cookie string and pick a specific key (MDN pattern).

JavaScript
document.cookie = "test1=Hello; path=/; SameSite=Lax";
document.cookie = "test2=World; path=/; SameSite=Lax";

const cookieValue = document.cookie
  .split("; ")
  .find((row) => row.startsWith("test2="))
  ?.split("=")[1];

console.log(cookieValue); // "World"
Try It Yourself

How It Works

  1. Set sample cookies. Create test1 and test2 for a predictable demo.
  2. Split the string. "; " separates pairs (RFC style; some agents vary).
  3. Find the name. startsWith("test2=") picks the right row.
  4. Take the value. Split on = and read index 1 → "World".

Example 3 — Delete a Cookie

Clear a cookie by setting a past expires with the same path.

JavaScript
document.cookie = "temp=1; path=/; SameSite=Lax";
console.log("before:", document.cookie.includes("temp="));

document.cookie =
  "temp=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax";

console.log("after:", document.cookie.includes("temp="));
Try It Yourself

How It Works

  1. Create a temp cookie. Confirm it appears in document.cookie.
  2. Expire it. A past UTC date tells the browser to remove that name.
  3. Match path. If you set path=/, delete with the same path or removal can fail.
  4. Verify. includes("temp=") should become false.
Compatibility

Browser Support

Document.cookie is Baseline Widely available on MDN. It works across modern browsers. For asynchronous cookie access, consider the Cookie Store API where supported.

✓ Baseline · Widely available

Document.cookie

Read/write accessor for script-visible cookies — one cookie per assignment; semicolon-separated string on read.

99% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
cookie Excellent

Bottom line: Safe and universal for basic cookie work. Prefer SameSite=Lax (default in modern browsers), encode values, and use HttpOnly + Secure on the server for auth cookies.

Frequently Asked Questions

It is an accessor property that lets you read and write cookies for the current document. Reading returns a semicolon-separated list of name=value pairs. Assigning sets or updates one cookie at a time.
No. MDN marks Document.cookie as Baseline Widely available. It is a standard property. For async cookie work, MDN also points to the Cookie Store API as a modern alternative.
What you write is not the same as what you read. The setter accepts one cookie plus optional attributes (expires, path, SameSite…). The getter returns only name=value pairs for cookies visible to the script — no attributes.
Set the same cookie name again with an expires date in the past (or max-age=0), and match path/domain if you set them originally.
No. Cookies marked HttpOnly are sent to the server but are not visible to document.cookie. That helps reduce damage from XSS cookie theft.
Yes. Use encodeURIComponent() so values do not contain commas, semicolons, or whitespace, which are disallowed in cookie values (MDN).

Next: currentScript

Learn how to read the <script> element currently being evaluated.

currentScript tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document contentType Property JavaScript Document currentScript Property