자바스크립트 쿠키 사용하기

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, HTTP 프로토콜의 일부이다.

 

HTTP(HyperText Transfer Protocol) 란, HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다

 

프로토콜이란, 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 합니다.

-MDN Web Docs

 

 

그냥 설명하려다 보니 개발에 대해 잘 모르는 나 같은 초보들은 HTTP나 프로토콜 같은 개념부터 잡는게 먼저일 것 같아서 설명을 추가하였다.

 

해석하자면 쿠키는 브라우저에 저장되는 작은 텍스트 데이터다.

 

온갖 사이트를 들어가보면 쿠키 허용 뭐 이딴 팝업 뜨는걸 볼 수 있는데, 그 때 말하는 쿠키가 이것이다.

 

쿠키를 활용하면 로그인할때 아이디저장과 같은 기능을 사용할 수 있다.

 

document.cookie

 

document.cookie 라고 콘솔에 찍어보면 요상한 문자열이 찍히는데

 

자세히 보면 문자열 중간중간이 name=value 쌍으로 구성되어있고, 각 쌍은 세미콜론(;)으로 구분한다.

ex)"cookie1=value1;  cookie2=value2;  cookie3=value3;"

 

split() 같은 배열관련 메서드나 정규식을 사용하여 각 쿠키들을 분리하면 값을 얻을 수 있다.

 

한번 쿠키를 가져와서 값을 읽는 함수를 만들어보자.

 

function getCookie(name) {
    let cookieArr = document.cookie.split(';');
    for (let i in cookieArr) {
        if (cookieArr[i].split('=')[0].trim() == name)
        if (cookieArr[i][cookieArr[i].length - 1] != '=') return cookieArr[i].split('=')[1];
    }
    return '';
}

 

 

1. document.cookie 로 전체 쿠키 문자열을 가져온다.

2. 가져온 쿠키 문자열을 split() 메서드로 ';' 기준으로 분리하여 배열로 만든다.

3. 쿠키 배열을 순회하기 시작한다.

4. 쿠키를 '='로 분리하여 앞부분 값을 가져온다 (name=value 에서 name 에 해당하는 값)

5. 파라미터로 전달받은 name값과 일치하는지 확인한다.

6. 쿠키의 value 값이 비어있지않다면 value 값을 return 한다.

    (쿠키의 마지막 문자가 '='라면 value가 없는 것이기 때문에, 마지막 문자가 '='가 아닐경우 값을 반환)

7. 5번 과정에서 name 값을 찾지 못했다면 ''을 return 한다.

 

 

문자열을 분리해서 사용하는 거라, url에서 파라미터 분리하는것과 맥락이 비슷하다.

 

---

 

그럼 쿠키를 가져오는 방법은 알아냈으니, 쿠키를 설정하는 방법도 알아보자.

 

document.cookie 로 값을 가져오면 name=value 형식으로 뜨지만

 

쿠키를 설정할때는 추가로 설정해줄 옵션들이 필요하다.

 

path

• path=/path_url

path 옵션을 설정하면, 이 경로나 이 경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수 있다. 절대 경로이어야 하고, 따로 설정해주지 않으면 기본값은 현재 경로로 설정된다.

보통 최상위 루트(path=/)로 path를 설정하여 자신의 웹사이트 전체에서 쿠키에 접근할 수 있게 설정한다.

 

 

 

expires와 max-age

• expires=Mon, 5 Sep 2022 10:28:07 GMT

expires 옵션은 쿠키의 만료기간을 설정한다. 따로 지정해주지 않으면, 브라우저가 종료될때 쿠키가 삭제된다.

브라우저는 설정된 만료일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제한다.

expires 옵션은 반드시 GMT(Greenwich Mean Time) 포맷으로 설정해야 한다.Date 객체를 .toUTCString() 메서드로 간단하게 변환할 수 있으니 걱정하지 말자.참고로 과거일자로 expires를 설정하면 쿠키가 삭제된다.

 

• max-age=3600

max-age는 expires의 대안으로 현재시간으로부터 만료기간까지의 시간을 '초' 단위로 설정한다.

ex) max-age=3600 으로 설정하면 지금으로부터 1시간 후에 쿠키가 만료된다는 뜻이다.

값을 0 이나 음수로 설정하면 쿠키가 삭제된다.

 

 

 

 

보통 위에 언급한 2개의 옵션만을 사용하지만 추가로 다른 옵션들도 존재한다.

 

 

 

 

domain

• domain=site.com

쿠키에 접근 가능한 domain(도메인)을 지정한다. 다만, 몇 가지 제약이 있어서 아무 도메인이나 지정할 수는 없다.

자세한 내용은 여기에서

domain 옵션에 아무 값도 넣지 않았다면, 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있다.

(site.com에서 설정한 쿠키는 other.com에서 값을 가져올 수 없음.)

 

 

 

 

secure

• secure

이 옵션을 설정하면 HTTPS로 통신하는 경우에만 쿠키가 전송된다.

기본적으로는 https에서 설정한 쿠키를 https, http 둘 다 읽을 수 있지만 secure 옵션을 사용하면 https 에서만 쿠키를 읽을 수 있다.

쿠키에 민감한 내용이 저장되어 있어 암호화되지 않은 HTTP 연결을 통해 전달되는 걸 원치 않는다면 이 옵션을 사용하면 된다.

 

 

 

 

samesite

• samesite=strict

samesite 옵션은 크로스 사이트 요청 위조(cross-site request forgery, XSRF) 공격을 막기 위해 만들어진 옵션이다.

이건 나도 아직 잘 이해를 못해서 자세한 내용은 여기에서...

 

 

---

 

 

이렇게 옵션들에 대해서도 알아보았으니 쿠키를 설정하는 함수를 한번 만들어보자.

 

아까 말했던 path, expires 2개의 옵션만 사용할 것이다.

 

function setCookie(name, value, days) {
    let exdate = new Date();
    exdate.setDate(exdate.getDate() + days); // 만료될 날짜 설정
    let expireDate = 'expires=' + exdate.toUTCString();
    document.cookie = name + '=' + value + ';' + expireDate + ';path=/'; //쿠키 만든다!
}

 

 

1. name, value, days 를 파라미터로 넘겨준다.

2. Date 객체를 생성하여 exdate(만료일자) 라는 변수에 할당한다.

3. 현재 시간에 파라미터로 받은 days를 더하여 만료일자를 설정한다.

4. exdate를 GMT포맷으로 변환하여 'expires=' 뒤에 붙인다.

5. 형식에 맞게 쿠키를 생성한다. ("name=value;expires=exdate;path=/")

 

 

쿠키를 설정할 때 주의할 점은, 백슬래시(\), 세미콜론(;) 과 같은 문자를 값으로 넣을때는 항상 이스케이프 처리를 해주어야한다. encodeURIComponent() 함수를 활용하자.

 

또한 쿠키 하나가 차지하는 용량은 최대 4KB까지이고, 사이트 하나당 약 20여 개의 쿠키를 허용한다.(브라우저에 따라 다름).