[Javascript] Cookie 다루기

 
 
 

Cookie란?

Cookie는 데이터이면서 우리가 현재 사용하는 PC에 작은 텍스트 파일로 저장되어 있는 것이다. 어떤 사이트에 접속했을 때 '일주일 동안 이 창 보지 않기'나 로그인 페이지에서 '아이디 저장' 또는 '자동 로그인' 같은 기능을 사용해 본 적이 있지 않은가?
 
사실 브라우저는 내용을 기억할 공간이 없는데, 이를 도와주는 것이 바로 쿠키이다. 쿠키에 대해 알아보기 전에 쿠키가 저장되는 방식은 key : value라는 점을 기억해 두자.
 
브라우저가 웹 페이지를 서버로부터 요청하게 되면 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다.
 
 
 

Cookie vs Session

쿠키는 사용자가 브라우저의 쿠키 데이터를 비우거나 금지하지 않는다면 계속해서 유지된다. 이와 달리 세션 저장소의 경우 방문자가 접속해 세션이 생성되고 시간이 지나 세션이 만료되면 저장소의 내용도 사라지게 된다.
 
쿠키와 세션의 차이에 대한 자세한 내용은 별도의 포스트를 통해 다루도록 하겠다.
 

 
 

브라우저에서 쿠키 확인하기

Chrome  브라우저에서 쿠키 데이터는 개발자도구 > Application 탭 > Cookies 항목에서 확인할 수 있다.

 
 
 

728x90

---

 
 
 

Javascript에서 Cookie 다루기

자바스크립트에서는 document 객체의 cookie 속성을 이용하여 쿠키를 생성/조회/수정/삭제할 수 있다.
 
 

read

document.cookie는 name=value 쌍으로 구성되어 있으며 각 쌍은 ;로 구분한다. 이때 각 쌍은 하나의 독립된 쿠키를 나타낸다. 그러므로 ;를 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있다.

let cookie = document.cookie; // cookie1=value1;cookie2=value2;...

 
 
 

write

// name이 user고, value가 John인 쿠키 추가
// 그리고 속성값으로 path와 expires를 설정해서 추가
// 이 속성값은 쿠키 스트링에 저장되지는 않고 속성 정보에 저장됨.
document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

 
 
 

create

// document.cookie = '쿠키이름=쿠키값'
document.cookie = 'username=홍길동';

// 만료 기간을 넣어서 쿠키가 자동으로 만료되도록 제작할 수 있음(UCT time을 이용)
document.cookie = 'username=홍길동; expires=Thu, 18 Dec 2013 12:00:00 UTC';

// 파라미터를 이용해 쿠키가 어느 브라우저에 속할 수 있는지 알려줄 수 있음.
document.cookie = "username=홍길동; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

 
 
 
 

change

document.cookie=는 getter와 setter 같이 동작한다고 이해하면 편리하다. setter를 수행할 때 모든 쿠키를 덮어쓰지 않고 명시된 쿠키의 값만 갱신한다.
 
한편 쿠키의 이름과 값에는 특별한 제약이 없기 때문에 모든 글자가 허용된다. 하지만 형식의 유효성을 일관성 있게 유지하기 위해 반드시 내장 함수 encodeURIComponent를 사용하여 이름과 값을 이스케이프 처리해 주는 것이 좋다.

// 기존 쿠키
document.cookie; // 'username=홍길동'

// 기존 쿠키에 name이 user고, value가 John인 쿠키 추가
// 새로운 쿠키를 생성했다고 기존 쿠키가 초기화되는 것이 아니라 setter와 같이 동작함.
// 따라서 전체 쿠키의 내용이 'user=John'이 되는 것이 아니라 기존 쿠키에 'user=John'이 추가됨.
document.cookie = "user=John";

document.cookie; // 'username=홍길동; user=John'

 
 
 

delete

만료 기간을 과거로 바꿔 버리면 된다. 단, 쿠키 요소를 삭제할 때에는 반드시 path를 맞춰야 한다. 삭제가 되지 않는다면 반드시 개발자도구에서 쿠키의 path를 확인해 볼 것.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

 
또는 max-age를 사용하는 방법도 있다.

// max-age 사용

// 1) 1시간 뒤에 쿠키가 삭제됨
document.cookie = "max-age=3600";

// 2) 만료 기간을 0으로 설정하여 쿠키를 바로 삭제
document.cookie = "max-age=0";

 
 
cf) 쿠키의 한계

쿠키에는 몇 가지 제약사항이 있다. encodeURIComponent로 인코딩한 이후의 name=value 쌍은 4KB를 넘을 수 없다. 이 용량을 넘는 정보는 쿠키에 저장할 수 없는 것이다. 또한 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있는데, 그 개수는 브라우저마다 조금씩 차이가 있다.

 

반응형

 

쿠키 파라미터

 
1) name 속성과 value 속성

• name과 value 속성은 데이터를 저장하고 읽는 데 사용하는 속성이다.
• 따라서 쿠키를 사용할 때에는 name과 value 속성을 반드시 지정해야 한다.

// name이 user고, value가 John인 쿠키 추가
document.cookie = "user=John;"

 
 
 
2) expires 속성

• expires 속성은 쿠키의 파기 날짜를 지정하는 속성이다.
• expire 속성에는 GMT 형식이나 UTC 형식으로 날짜를 입력해야 한다. 
• 파기 날짜를 입력하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

 
 
 
3) max-age 속성

• expires 옵션의 대안으로 쿠키 만료 기간을 설정할 수 있게 해 준다.
• 현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산한 값을 설정한다.

// 1시간 뒤 쿠키 삭제
document.cookie = "user=John; max-age=3600";

// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제
document.cookie = "user=John; max-age=0";

 
 
 
4) Secure 속성

• Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서만 요청할 수 있다.

document.cookie = "user=John; Secure"

 
 
 
5) Domain 속성

• Domain 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.
• 페이지 요청과 비교해서 도메인의 경로와 Domain 속성이 일치하지 않으면 쿠키에 접근하는 것을 막으므로 Domain 속성은 건드리지 않는다.

// naver.com, www.naver.com, blog.naver.com, cafe.naver.com 서브 도메인도 모두 포함
document.cookie = "user=John; Domain=.naver.com"

 
 
 
6) path 속성

• path 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.
• path 속성은 일부러 지정하는 경우가 많은데 특정 경로(폴더명)를 설정한다.
• path 속성은 /폴더/로 설정되는데 이렇게 설정한 path 속성이 설정되면 현재 폴더 또는 현재 폴더의 하위에서 접근할 수 있다.
• path 속성을 '/'로 설정하면 도메인 내의 모든 곳에서 접근할 수 있다(쿠키의 범위를 좁게 잡을수록 보안에는 좋음).

document.cookie = "user=John; path=/"

 
 
 
7) httpOnly 속성

• 설정 시 자바스크립트에서 쿠키에 접근할 수 없게 한다. 쿠키 조작을 방지하기 위해 설정하는 것이 좋다.

document.cookie = "user=John; httpOnly"