기본 콘텐츠로 건너뛰기

cookie를 이용한 하루 그만 보기 설정 - javascript

오늘 그만 보기 설정하기. setCookie, getCookie


javascript

// 쿠키 확인
if(!getCookie("onday")) { // oneday 쿠키가 없으면
  info.value.show = true; // (레이어)팝업 보이기
}

...

// 닫기
const closePop = (n) => {
  info.value.show = false;

  // 오늘 그만 보기로 닫을 때
  if(n !== undefined) {
    setCookie("onday", 1, 1); // oneday 쿠키 설정
  }
}

...

// 조건에 맞는 쿠키가 없다면 undefined를 반환
const getCookie = (name) => {
  const encodeName = encodeURIComponent(name);
  const matches = document.cookie.match(new RegExp(
    "(?:^|; )" + encodeName.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
// 
const setCookie = (name, value, days) => {
  let expires = '';
  // e.g. 'hello world' -> 'hello%20world', 'test?' -> 'test%3F'
  const updatedCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

  if(days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    // 쿠키의 유효 일자는 GMT(Greenwich Mean Time) 포맷으로 설정(date.toUTCString을 사용)
    expires = `; expires=${date.toUTCString()}`;
  }
  document.cookie = `${updatedCookie}${expires}; path=/`;
}

cookie를 이용해 일정기간 보여지는 것을 설정할 수 있다.


끝.