[DOM_Document] JS - document.cookie 속성 ★ - (쿠키이름/쿠키값) 쌍을 설정/반환 (= document.cookie속성 = 다큐먼트쿠키속성/도큐먼트쿠키속성)

1. document.cookie 예제 - 세미콜론( ; )으로 분리된 key=value 쌍 형식의 문서 쿠키를 설정/반환
2. document.cookie 정의
3. document.cookie 구문
4. Cookie (쿠키) / LocalStorage (로컬스토리지) 차이점

document.cookie 예제 - 세미콜론( ; )으로 분리된 key=value 쌍 형식의 문서 쿠키를 설정/반환 

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.cookie;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기

document.cookie 정의

 

세미콜론( ; )으로 분리된 key=value 쌍 형식의 문서 쿠키를 설정/반환.

(예) - 쿠키 설정 경우

document.cookie="username=homzzang; expires=Sun, 31 Dec 2022 12:00:00 UTC; path=/";

 

---

 

1.

• 쿠키는 「콤마( , ), 세미콜론( ; ), 공백」 포함 불가.
• encodeURIComponent() 메서드가 위 사항을 보증.

 

2. 때론, 아래 Storage API가 더 좋을 수 있음.

• localStorage 속성
• sessionStorage 속성

 

3.

모든 브라우저 지원.

 

4. MDN document.cookie 예제보기

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie 

 

document.cookie 구문

 

반환

document.cookie

 

설정

document.cookie = newCookie

 

---

[인자]- newCookie 자리에 세미콜론(;)으로 구분지어 올 수 있는 것들.

 

expires=date

GMT 형식의 날짜. 

• Date.toUTCString 메서드 사용)
• 기본값: 브라우저를 닫으면 쿠키가 삭제됨.

max-age=seconds

쿠키가 삭제되기 전의 최대 기간.

• 0 또는 과거 날짜인 경우 쿠키가 삭제됨.

path=path

쿠키가 속한 디렉토리의 절대 경로(예: '/').

• 기본값: 현재 디렉터리

domain=domainname

사이트의 도메인(예: 'homzzang.com').

• 기본값: 문서의 도메인.

secure

쿠키를 서버로 전송하려면 보안 프로토콜(https)을 사용,

 

---

[반환값]

 

세미콜론( ; )으로 구분된 key:value 쌍으로 구성된 문서 쿠키. (※ String 타입)

 

Cookie (쿠키) / LocalStorage (로컬스토리지) 차이점

Cookie (쿠키)

 

• 클라이언트-서버(브라우저-서버) 애플리케이션용. (즉, 쿠키는 웹사이트와 연결되어 있음.) 
• 데이터가 클라이언트용인 경우 모든 HTTP 헤더에 쿠키를 보내는 것은 대역폭 낭비임. 
• 일부 사용자는 브라우저에서 일반적으로 쿠키를 비활성화 함.
• 쿠키 크기 제한은 4KB. 
• 쿠키에는 만료일 존재 O

---

LocalStorage (로컬 저장소)

 

• 클라이언트(브라우저) 애플리케이션용.
• 도메인당 5MB로 제한
• 만료일 존재 X