javascript cookie 사용하기

javascript cookie 사용하기

안녕하세요.TriplexLab입니다 :)

글을 작성하기 앞서 제가 쓴 글 중에서 cookie를 활용해 '레이어 팝업 오늘 하루 그만 보기' 작성한 것이 있습니다.
여기도 참고하면 좋을 것 같아요.

jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정

 

이제 본격적으로 javascript cookie 사용하는 방법에 대해서 살펴보도록 하겠습니다.

기본적으로 document 에서 cookie를 제공하는데
이를 더욱 간편하게 사용하기 위해서는 자주 사용하는 기능들을 미리 만들어서 사용하는 편하다.

📁 cookie 저장

 const setCookie = function(name, value, day) {
   const date = new Date();
   date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000);
   document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
 };

파라미터로 받은 day(기간)을 date 객체에 담는다. 1/1000 초 임으로 60*60*24*1000으로 1일을 만듭니다.
이제 setCookie함수로 쿠키에 저장할 수 있습니다.

사용방법

// cookieName라는 이름과 cookieValue라는 값을 가지며 1일동안 유지되는 cookie를 생성 됩니다.
setCookie("cookieName", "cookieValue", 1);

---

📍cookie 조회

const getCookie = function(name) {
  const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
  return value? value[2] : null;
};

위에서 쿠키를 저장한 값들을 조회하는 함수를 만들었습니다.
해당하는 이름을 가진 cookie를 조회합니다.(조회한 cookie를 반환합니다.)

사용방법

//cookieName 라는 이름의 cookie를 조회합니다.

alert(getCookie("cookieName"));
// or
console.log(getCookie("cookieName"));

---

🧹 cookie 삭제 

const deleteCookie = function(name) {
  const date = new Date();
  document.cookie = name + "= " + "; expires=" + date.toUTCString() + "; path=/";
};

위에서 쿠키를 저장한 값들을 필요에 따라서 삭제하는 함수를 만들었습니다.
해당하는 이름을 가진 cookie를 현재 날짜로 수정합니다.
현재 날짜가 지나자마자 사라짐으로 삭제됩니다.

사용방법

// cookieName 라는 이름의 cookie를 삭제 합니다.
deleteCookie("cookieName");

 

저희가 위에서 했던 모든 작업들을 자주사용하는 기능이다 보니 
이미 npm에서 서드파티 모듈(3rd party module)화가 되어서 제공되고 있습니다.
연습할 때는 위에처럼 직접 코드를 만들어서 분석해보면 좋겠지만, 
실제 프로젝트를 만들때는 다음과 같은 모듈을 사용하는 것이 더 효율적으로 일하는 방법일 것 같네요.

js-cookie