Cookie 사용하여 팝업문 만들기

const popup = document.querySelector(".popup");
const checkBox = document.querySelector('.popup > input');
const closeBtn = document.querySelector(".popup > button");

closeBtn.onclick = function() {
    console.log(checkBox.checked)
    if(checkBox.checked) {
        setCookie("oneday");
    }
    popup.style.display = "none";
};

위 내용은 checkbox 타입의 input의 체크사항을 감지하여 만약 체크시에는 cookie 에 oneday 라는 값을 입히는 과정

function setCookie(str) {
    let popDay = new Date();
    popDay.setSeconds(popDay.getSeconds()+10);
    document.cookie = `event=${str}; expires=${popDay.toUTCString()}`;
};

기본적으로 현재 시간에 해당하는 new Date() 명령어의 시간을 조정하는 setDay 명령어를 사용하나 여기서는 시범적으로 Seconds 로 조정하여 10초를 늘리도록 한다.

이후 cookie 값에 expires 값을 넣어 10초 이후에 cookie 가 사라지도록 한다.

function getCookie() {
    if(document.cookie.match("oneday")) {
        popup.style.display = "none";
    } else { 
        popup.style.display = "block";
    }
};
getCookie();

window.addEventListener("click", function() {
    localStorage.setItem("num", 1000);
    localStorage.setItem("num2", 2000);
})
console.log(localStorage.getItem("num"));

최종적으로 해당 쿠키가 있다면 팝업이 display none 상태를 유지하게 된다. cookie 에는 includes 가 아닌 match 를 사용하는 것이 중요