• HTML 코드
• CSS 코드

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

<aside> 💡 기본 로직

1. 모든 요소는 DOMContentLoaded 이벤트 안에 구현
2. 방문 횟수를 업데이트 하는 함수를 정의
3. 쿠키를 설정하는 함수를 정의
4. 쿠키를 가져오는 함수를 정의
5. 방문 횟수를 업데이트하는 함수를 호출

</aside>

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

• '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;
}