[JS] 자바스크립트로 일주일 동안 보지 않기 구현(쿠키)

쿠키(Cookie)

쿠키는 문자열로 이루어진 작은 데이터 조각이며, 일반적으로 웹 서버가 클라이언트(브라우저)에게 전달하는 작은 파일입니다. 쿠키는 이름-값 쌍으로 구성되며, 이 값은 일반적으로 문자열로 표현됩니다. 브라우저에서는 쿠키를 저장하고 이를 다음 요청에서 서버로 다시 전송하여 사용자가 방문한 웹 사이트에 대한 정보를 저장하고 추적합니다. 따라서 쿠키는 웹 개발에서 매우 유용한 기술 중 하나라고 볼 수 있습니다.

---

자바스크립트에서 쿠키의 생성 방법과 구성요소

자바스크립트에서 쿠키를 생성하는 방법은 document.cookie 를 이용하면 됩니다.

쿠키는 보통 이름, 값, 도메인, path(접근가능경로), Expires(만료기간),secure(https 제한 유무설정) 등으로 구성되며, 이 외에도 다양한 속성이 있습니다.

 

다음 예시는 이름, 값, 만료기한, 경로, 도메인, secure 를 사용하여 쿠키를 생성하는 예시를 정리한 것입니다.

const cookieName = "myCookie"; // 쿠키의 이름입니다. /** 이름과 값은 하나의 쌍입니다. */
const cookieValue = "hello world"; //쿠키에 저장된 값입니다.
const expirationDate = new Date();
expirationDate.setMonth(expirationDate.getMonth() + 1); //쿠키가 만료되는 기간입니다.
const path = "/"; // 설정된 경로 및 하위경로에서만 쿠키 접근이 가능합니다.
const domain = "example.com"; //해당 도메인에서만 쿠키 접근이 가능합니다.
const secure = true; //true 로 설정할 시 http2 로만 쿠키에 접근할 수 있습니다.

document.cookie = `
${cookieName}=${cookieValue}; //쿠기 이름과 값
expires=${expirationDate.toUTCString()};  //쿠키 만료일자
path=${path}; domain=${domain};  //도메인
secure=${secure}`; //secure

---

7주일 동안 창이 뜨지 않도록 쿠키 설정하기

 

모달창이 일주일 동안 뜨지 않도록 하기 위해서 쿠키의 만료기한을 설정하는  expires 를 7일로 설정하면 됩니다. 즉, 모달창의 체크박스를  checked 하는 순간 쿠키를 생성하고, 이 때 쿠키의 만료기한을 현재 날짜 기준으로 +7이 되는 날짜에 쿠키가 만료되어 사라지도록 설정합니다.

 

 그 후 사용자가 다시 웹페이지에 방문했을 때, 쿠키의 이름과 값으로  설정했던 "hideModal=true"가 존재한다면, 모달창이 표시 되지 않도록 하고, 존재하지 않는다면 모달창의 display 를 block 으로 설정하여 화면에 표시되도록 분기처리 합니다.

// 모달 창을 닫을 때 호출되는 함수
function closeModal() {
  // 체크박스 상태를 확인하여 쿠키 생성 여부를 결정합니다.
  const checkbox = document.getElementById("closeModalCheckbox");
  if (checkbox.checked) {
    // 쿠키 만료 날짜를 7일 후로 설정합니다.
    const expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + 7);

    // 쿠키를 생성합니다.
    document.cookie = "hideModal=true; expires=" + expirationDate.toUTCString() + "; path=/";
  }
  
  // 모달 창을 닫습니다.
  const modal = document.getElementById("myModal");
  modal.style.display = "none";
}

// 페이지 로드 시 모달 창을 표시합니다.
function showModal() {
  // 쿠키에서 hideModal 값이 true이면 모달 창을 표시하지 않습니다.
  if (document.cookie.indexOf("hideModal=true") >= 0) {
    return;
  }

  // 모달 창을 표시합니다.
  const modal = document.getElementById("myModal");
  modal.style.display = "block";
}

 

한 가지 더 추가 설명하자면

document.cookie.indexOf("hideModal=true") 가 가능한 이유는 쿠키가 문자열로 표기 되기 때문입니다.

 

예를 들어  다음과 같은 쿠키를 설정했다고 가정해봅시다.

// 쿠키 설정
document.cookie = "username=john; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

// 쿠키 문자열 확인
console.log(document.cookie);

 

이 쿠키를 출력하면 다음 처럼 문자열로 출력이 됩니다.

username=john; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/

 

따라서  문자열에 접근이 가능한 메서드인 indexOf()를 사용하여 이 메서드 인자로 전달된 문자열과 일치하는 경우 해당 위치의 인덱스 값을 반환하고 존재하지 않으면 -1을 반환하는 특성을 이용하여 쿠키의 이름=값의 쌍의 존재유무에 따른 분기처리를 수행할 수 있게 됩니다.