[LocalStorage] 팝업창 오늘 하루 보지 않기 LocalStorage

팝업을 div 태그로 만들어서 띄우고, button 하나 달아서 닫히게끔 간단하게 구현했다.

사용하다 보니 "오늘 하루 그만 보기" 이 기능이 없다는 게 이렇게도 귀찮은 거였구나... 싶었다

다른 페이지 갔다가 메인에 와도 팝업이 띄워지고, 다른 사이트 갔다가 와도 팝업이 띄워지고,, 계속 X 버튼을 눌러줘야 하다니ㅋㅋ

 

그래서 input 태그를 하나 달았고, 캐시 혹은 로컬 스토리지 둘 중 하나를 사용해서

새벽 00시 전까지 팝업이 보이지 않게끔 구현하려 한다.

 

먼저 캐시를 많이 들어보기는 했는데, 캐시를 가지고 작업을 해본 적은 없다.

캐시에 대해 기본 개념을 알아보자.

 

🍪란?

웹사이트에 접속하면 정보가 크게 두 군데에 저장이 된다.

클라이언트에 저장되는 것이 🍪

서버에 저장되는 것이 session 그리고 🍪도 저장이 된다.

 

간혹 사이트에 들어갔을 때, 쿠키 저장을 허락하냐는 문구를 본 적이 있다.

이 쿠키는 서버에 내가 접속한 정보를 기록해도 되냐는 뜻이다.

내가 저장한 정보라던지, 페이지를 어디 어디 돌아다녔는지 등등

이 정보들은 단순 string으로 저장되는 값이다.

 

팝업 하루 보지 않는 데 사용하려는 것은 클라이언트 🍪이다.

 

F12 검사기창에서 Application에 보면 사이트의 온갖 쿠키들이 들어있다.

이 목록에서 중요한 것은 Name, Value, Expires이다.

Path 가 / 로 되어있는 것은 이 사이트의 모든 경로의 정보가 저장된다는 뜻이다.

 

그다음 로컬 스토리지는

• localStorage(로컬스토리지)는 사용자의 로컬에 존재하는 저장소이다.
• 우리는 이 저장소에 특정 데이터를 저장하거나 수정하거나 삭제할 수 있다.
• 유사한 것으로는 session storage가 있는데, 세션 스토리지와 달리 로컬스토리지는 유효기간이 존재하지 않는다.

로컬 스토리지는 말 그대로 로컬에서 존재하므로 서버와의 통신 없이 사용가능한데,

이 로컬스토리지를 팝업에 적용시켜 보자

 

document.addEventListener('DOMContentLoaded', function() {
  const popupLayer = document.querySelector('.popup-layer');
  const closeButton = document.querySelector('.popup-close');
  const dontShowAgainCheckbox = document.querySelector('#today_close1');

  // 로컬 스토리지에서 상태 확인
  const lastHideTime = localStorage.getItem('lastHideTime');
  const now = new Date().getTime();

  if (lastHideTime && now - parseInt(lastHideTime) < 24 * 60 * 60 * 1000) {
    popupLayer.style.display = 'none';
  }

  // "그만 보기" 체크박스 클릭 시 이벤트
  dontShowAgainCheckbox.addEventListener('change', function() {
    if (this.checked) {
      const hideUntilTime = now + 24 * 60 * 60 * 1000;
      localStorage.setItem('lastHideTime', hideUntilTime.toString());
    } else {
      localStorage.removeItem('lastHideTime');
    }
  });

  // 닫기 버튼 클릭 시 이벤트
  closeButton.addEventListener('click', function() {
    popupLayer.style.display = 'none';
  });
});

- lastHideTime이라는 변수에 지금 시간 + 24시간을 넣어준다.

- 체크박스 클릭 시, lastHideTime을 로컬 스토리지에 넣어준다.

- 만약 로컬 스토리지에 lastHideTime 이 있고 24시간이 채 지나지 않았으면 팝업을 보이지 않는다.

 

캐시와 로컬 스토리지 둘 중에 로컬 스토리지를 이용했는데, 다음에는 캐시를 꼭 사용해보고 싶다.