Ted's Codding study

방문자 수 카운트 - 쿠키활용 본문

JavaScript

방문자 수 카운트 - 쿠키활용

Ted93 2024. 5. 29. 15:15

HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Todo List Application</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="app">
    <h1>방문자 수 카운터</h1>
    <p>이 페이지의 방문자 수: <span id="visitCount">0</span></p>
  </div>

  <script src="main.js"></script>
</body>

</html>

CSS 코드

body, html {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.app {
  background: white;
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

JS 코드

document.addEventListener('DOMContentLoaded', () => {
  const visitCountElement = document.getElementById('visitCount');

  //& 방문 횟수를 업데이트하는 함수 정의
  function updateVisitCount() {
    let visits = getCookie('visits');
    visits = visits ? parseInt(visits) + 1 : 1;

    setCookie('visits', visits, 365);
    visitCountElement.textContent = visits;

    //& 쿠키 설정 함수 정의
    function setCookie(name, value, days) {
      let expires = '';
      if (days) {
        const date = new Date();
        date.setTime(date.getTime() + 365 * 24 * 60 * 60 * 1000);
        expires = 'expires=' + date.toUTCString();
      }

      document.cookie = name + '=' + value + ';' + expires + ';path=/';
    }

    //& 쿠키 가져오는 함수 정의
    function getCookie(name) {
      let nameEQ = name + '=';

      let ca = document.cookie.split(';');
      console.log(ca);
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        console.log(c);
        if (c.indexOf(nameEQ) === 0) {
          console.log(nameEQ.length);
          console.log(c.length);
          return c.substring(nameEQ.length, c.length);
        }
      }

      return null;
    }
  }
  updateVisitCount();
});

위와 같은 화면에서 새로고침하거나, 페이지를 새로 들어갈 때마다 방문자 수의 카운트를 1씩 증가시키는 코드를 구현 - 단 쿠키를 활용

💡 기본 로직
모든 요소는 DOMContentLoaded 이벤트 안에 구현
방문 횟수를 업데이트 하는 함수를 정의
쿠키를 설정하는 함수를 정의
쿠키를 가져오는 함수를 정의
방문 횟수를 업데이트하는 함수를 호출

방문 횟수를 업데이트 하는 함수를 정의

'visits'라는 이름의 쿠키 값을 가져옴 → 쿠키 값이 있으면 1을 증가, 없으면 1로 설정
setCookie 함수를 호출해서 (만들 예정), 쿠키 visits를 업데이트하고 유효기간은 임의로 1년으로 설정
HTML 요소에 방문 횟수를 표시해줌

document.addEventListener('DOMContentLoaded', () => {
  const visitCountElement = document.getElementById('visitCount');

  // 방문 횟수를 업데이트하는 함수 정의
  function updateVisitCount() {
    let visits = getCookie('visits');
    visits = visits ? parseInt(visits) + 1 : 1;

    setCookie('visits', visits, 365);
    visitCountElement.textContent = visits;
});

쿠키 설정 함수 정의

쿠키의 만료 문자열을 초기화
만료일이 주어진 경우에 현재 날짜와 시간을 가져와서 만료일 뒤로 expires 날짜 설정
expires와 쿠기값 변경에 대해서는 앞의 글 https://ted93.tistory.com/entry/쿠키2-Cookie 참고

// updateVisitCount 함수 끝나는 곳 아래에 작성
// 쿠키 설정 함수 정의
function setCookie(name, value, days) {
  let expires = '';
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = 'expires=' + date.toUTCString();
  }
  document.cookie = name + '=' + value + ';' + expires + ';path=/';
}

쿠키 가져오는 함수 정의

아래 코드는 아래 사진과 함께 예를 들어서 설명

// setCookie함수 끝나는 곳 아래에 작성
// 쿠키 가져오는 함수 정의
function getCookie(name) {
  let nameEQ = name + '=';

  let ca = document.cookie.split(';');
  console.log(ca);
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i].trim();
	  if (c.indexOf(nameEQ) === 0) {
      console.log(nameEQ.length);
      console.log(c.length);
      return c.substring(nameEQ.length, c.length);
    }
  }

  return null;
}