[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기

Cookie란?

Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다.

​어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가?

사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. 쿠키를 알아보기 전, 쿠키가 저장되는 방식은 key : value 방식임을 기억해두자.

• ex) username = 홍길동

브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다.

---

💡 쿠키와 세션의 차이는?

쿠키는 사용자가 브라우저의 쿠키데이터를 비우거나 금지하지 않는다면 계속해서 유지가 된다.

이와 달리 세션 저장소의 경우 방문자가 접속해 세션이 발생하고 지정된 시간이 지나 세션이 종료되면 저장소의 내용도 사라지게 된다는 점이 차이점이다.

[WEB] 🌐 쿠키 / 세션 정리

---

💡 브라우저에서 쿠키 확인하는 법

​크롬에서 쿠키 확인하는 방법은 개발자도구(F12) 에서 Application 탭 Cookies 에서 확인하면 된다.

---

자바스크립트로 Cookie 다루기

자바스크립트는 document.cookie 속성을 이용하여 쿠키를 create, delete, read 할 수 있다.

---

자바스크립트 쿠키 문법

 

read

document.cookie는 name=value 쌍으로 구성되어있고, 각 쌍은 ;로 구분한다.

이때, 쌍 하나는 하나의 독립된 쿠키를 나타낸다. ;을 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있다.

var x = 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 = 홍길동";


// 만료기간을 넣어서 쿠키가 자동 만료 되도록 제작할 수 있다.(UTC time을 이용)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";


// 파라미터를 이용하여 쿠키가 어디 브라우저에 속할 수 있을지 알려줄 수 있다.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

 

change

document.cookie= 는 getter와 setter같이 동작한다고 이해하면 된다.

setter를 수행할때 모든 쿠키를 덮어쓰지 않고, 명시된 쿠키인 user의 값만 갱신한다.

​

쿠키의 이름과 값엔 특별한 제약이 없기 때문에 모든 글자가 허용된다. 하지만 형식의 유효성을 일관성 있게 유지하기 위해 반드시 내장 함수 encodeURIComponent를 사용하여 이름과 값을 이스케이프 처리해 줘야 하는게 좋다.

// Name이 user고, Value가 John인 쿠키 추가
// document.cookie = 했다고 초기화되는게 아니라, setter처럼 작동하게 된다.
// 그래서 = "user=John"하면 전체가 'user=john'이 되는게 아니라 '+= user=john'이 추가되게 된다.
document.cookie = "user=John";

​

delete

만료 기간을 과거로 바꾸어 버리면 된다. 단, 쿠키 요소를 삭제할때 반드시 path를 맞춰야 한다.

삭제가 안된다면, 개발자도구에서 쿠키 path를 필히 확인 해 볼것

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

// max-age 사용

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

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

​[ 쿠키의 한계 ]

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

---

쿠키 파라미터

 

① Name 속성과 Value 속성

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

// Name이 user고, Value가 John인 쿠키 추가
document.cookie = "user=John"

 

② Expires 속성

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

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

 

③ max-age 속성

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

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

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

​

④ Secure 속성

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

document.cookie = "user=John; Secure"

 

⑤ Domain 속성

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

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

 

⑥ Path 속성

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

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

 

⑥ HttpOnly 속성

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

document.cookie = "user=John; httpOnly"

---

쿠키 함수 라이브러리

다음은 쿠키동작을 함수로 모듈화하여 간편하게 쿠키를 다룰수 있도록 하는 헬퍼 함수들이다.

 

@get

// 주어진 이름의 쿠키를 반환하는데,
// 조건에 맞는 쿠키가 없다면 undefined를 반환합니다.
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

​

@set

function setCookie(name, value, options = {}) {

  options = {
    path: '/', // 경로 지정
    ...options // 아규먼트로 옵션을 넘겨줬을경우 전개연산자로 추가 갱신
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString(); // 생 Date 객체라면 형식에 맞게 인코딩
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) { // 밸류가 없다면
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie; // 새로 갱신
}

//쿠키 생성
if (!document.cookie) {
   setCookie('expires', date.toUTCString());
   console.log('new Cookie created !');
}

// 쿠키 추가
setCookie('user', 'John', {secure: true, 'max-age': 3600});

​

@delete

function deleteCookie(name) { // 해당 쿠키 요소만 삭제
  setCookie(name, "", {
    'max-age': -1
  })
}

​

@deleteAll

function deleteAllCookies() {
   var cookies = document.cookie.split(";");
   for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i];
      var eqPos = cookie.indexOf("=");
      var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
      deleteCookie(name.trim());
   }
   console.log('all cookies deleted !')
}

---

 

# 참고자료

https://ko.javascript.info/cookie

https://wickedmagica.tistory.com/m/72?category=727614