본문 바로가기
JavaScript

[Javascript] cookie를 활용한 팝업창 만들기

by 동복이 2023. 3. 27.

cookie

쿠키는 작은 데이터 파일로 사용자가 웹사이트를 방문을 기록할때 남는 간단한 파일이다. 브라우저가 종료되도 남아 있으나 쿠키에 expire값을 줘서 일정시간이 지난뒤에 쿠키가 삭제되게 할 수 있다.

이번 실습에선 expire 값을 실시간으로 볼 수 있게 출력하였으며 다른 사이트를 이용할때 팝업이 뜨면 하루동안 보지않기 같은 기능을 구현하였다.

 

 

 

  • cookiepopup.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./cookiepopup.css" />
  </head>
  <body>
    <div>
      <p>남은 시간 : <span class="popup-time"></span></p>
    </div>
    <div class="popup-wrap">
      <div class="popup">
        <div class="popup-header">
          <span class="popup-btn"></span>
        </div>
        <div class="popup-body">
          <button class="event-btn">클릭</button>
        </div>
      </div>
    </div>
  </body>
  <script src="./cookiepopup.js"></script>
</html>

 

 

  • cookiepopup.css
.popup-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.is-on {
  display: block;
}

.popup-wrap .popup {
  position: absolute;
  width: 400px;
  height: 600px;
  background-color: white;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-wrap .popup .popup-btn {
  width: 30px;
  height: 30px;
  margin: 10px;
  display: block;
  float: right;
  position: relative;
}

.popup-wrap .popup .popup-btn::after,
.popup-wrap .popup .popup-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  height: 4px;
  width: 100%;
  background-color: black;
}
.popup-wrap .popup .popup-btn::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

 

 

  • cookiepopup.js
let popupBtn = document.querySelector(".popup-btn");
let popupEvent = document.querySelector(".event-btn");
let popupCookie = getCookie("event-popup");

function popupOpen() {
  let popup = document.querySelector(".popup-wrap");
  if (popup.classList.contains("is-on")) {
    popup.classList.remove("is-on");
  } else {
    popup.classList.add("is-on");
  }
}

popupBtn.addEventListener("click", popupOpen);
popupOpen();

popupEvent.addEventListener("click", function () {
  console.log("event");
  // 쿠키 추가
  setCookie("event-popup", true, 10);
  location.reload();
});

// 쿠키 추가 ========================================================= //

function setCookie(name, value, time) {
  let date = new Date();
  date.setTime(date.getTime() + time * 1000);
  let str = name + "=" + value + ";expires=" + date.toUTCString() + ";path=/";
  let str2 = getCookieTime(str);
  // 문자열로 데이터를 저장하는데 값이 여러개일 경우 배열이나 객체를 사용
  // 문자열을 받아서 객체로 변환
  document.cookie =
    name +
    "=" +
    `{"value" : "${value}", "time" : "${str2}"}` +
    ";expires=" +
    date.toUTCString() +
    ";path=/";
}

// 쿠키값이 없으면 팝업 작동
if (popupCookie != undefined) {
  popupOpen();
}

function getCookie(name) {
  var i,
    x,
    y,
    ARRcookies = document.cookie.split(";");
  for (i = 0; i < ARRcookies.length; i++) {
    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
    x = x.replace(/^\s+|\s+$/g, "");
    if (x == name) {
      return unescape(y);
    }
  }
}

function getCookieTime(cookie) {
  console.log(cookie);
  // 쿠키 문자열을 배열로 변환
  let str = cookie.split(";");
  console.log(str);

  let str2 = str.find(function (i) {
    let temp = i.trim();
    return temp.startsWith("expires=");
    // trim 메소드 : 문자열 양끝 공백 제거
    // startsWith 메소드 : 해당 문자로 시작하는지 확인 매개변수로 시작하는 문자열 전달
    // let _bool = i.trim().startsWith("expires=");
    // if (_bool) {
    //   return new Date()
    // } else {
    //   return null;
    // }
  });
  console.log(str2);
  if (str2) {
    let str3 = str2.trim();
    console.log(str3);
    // 쿠키의 시간을 가져와 Date 객체로 생성
    return new Date(str3.slice(9));
  } else {
    return null;
  }
}

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1999 00:00:10 GMT;";
}

// 시간이 차이나는 값 만들기
function times(time) {
  // 밀리초로 생성
  let day = Math.floor(time / (24 * 60 * 60 * 1000));
  time %= 24 * 60 * 60 * 1000;
  console.log(time);
  let hour = Math.floor(time / (60 * 60 * 1000));
  time %= 60 * 60 * 1000;
  let min = Math.floor(time / (60 * 1000));
  time %= 60 * 1000;
  let sec = Math.floor(time / 1000);
  return day + "일 " + hour + "시간 " + min + "분 " + sec + "초";
}

// 비동기 함수
// setInterval() : 매초마다 동작하는 함수
let setTime = setInterval(() => {
  let date2 = new Date();
  // // 객체가 아닌 값이 들어옴
  let timetag = document.querySelector(".popup-time");
  if (popupCookie != undefined) {
    let time = JSON.parse(popupCookie).time;
    let date = new Date(time);
    timetag.innerHTML = times(popupTime(date, date2));
  } else {
    timetag.innerHTML = "Time Over";
  }
}, 1000);

function popupTime(date1, date2) {
  return date1.getTime() - date2.getTime();
}

function times(time) {
  let day = Math.floor(time / (24 * 60 * 60 * 1000));
  time %= 24 * 60 * 60 * 1000;
  let hour = Math.floor(time / (60 * 60 * 1000));
  time %= 60 * 60 * 1000;
  let min = Math.floor(time / (60 * 1000));
  time %= 60 * 1000;
  let sec = Math.floor(time / 1000);

  if (time <= 0) {
    // setInterval()을 멈춤. 매개변수로 전달
    clearInterval(setTime);
    let timetag = document.querySelector(".popup-time");
    timetag.innerHTML = "";
    popupOpen();
  }

  return `${day}일 ${hour}시 ${min}분 ${sec}초`;
}

 

 

728x90

'JavaScript' 카테고리의 다른 글

[Javascript] 슬라이드 만들기  (0) 2023.03.27
[Javascript] 구조분해할당  (0) 2023.03.27
[Javascript] localstorage를 활용한 todolist 만들기  (0) 2023.03.27
[Javascript] 마우스 관련 메소드를 활용한 상자 색 옮기기  (0) 2023.03.24
[Javascript] 생성자 함수와 자주쓰는 DOM, BOM 메소드  (0) 2023.03.21

관련글

티스토리툴바