블로그 전체목록

홈페이지 팝업 ‘1일간 보지 않기’ 만들기 | JavaScript Cookie 사용법

기술정보 26.09.22 조회 15

홈페이지 팝업 ‘1일간 보지 않기’ 만들기 | JavaScript Cookie 사용법

홈페이지를 이용하다 보면 이벤트, 공지사항, 프로모션 등의 팝업에서 ‘1일간 보지 않기’, ‘하루 동안 보지 않기’와 같은 기능을 볼 수 있습니다.

이번 글에서는 JavaScript Cookie를 활용해 홈페이지 팝업을 1일간 보이지 않도록 설정하는 방법을 알아보겠습니다.

별도의 서버 개발 없이 HTML과 JavaScript(jQuery)만으로 구현할 수 있으며,

기업 홈페이지, 병원 홈페이지, 학원 홈페이지, 쇼핑몰 등 다양한 웹사이트의 팝업에 활용할 수 있습니다.

➰➰➰

✅ ‘1일간 보지 않기’ 기능은 어떻게 동작할까?

팝업의 ‘1일간 보지 않기’ 기능은 사용자가 버튼을 클릭했을 때 브라우저에 Cookie를 저장하고,

이후 홈페이지에 다시 방문했을 때 해당 Cookie가 존재하는지 확인하는 방식으로 구현할 수 있습니다.

‘1일간 보지 않기’ 버튼 클릭 → Cookie 저장 → 1일 동안 Cookie 유지 → 홈페이지 다시 방문 → Cookie 존재 여부 확인 → Cookie가 있으면 팝업 숨김

✅ Cookie란?

Cookie는 웹사이트에서 사용하는 정보를 사용자의 브라우저에 저장하는 기능입니다.

즉, 사용자가 ‘1일간 보지 않기’를 클릭하면 다음과 같은 Cookie가 만들어집니다.

popup_hide=Y

항목	내용
popup_hide	Cookie 이름
Y	저장할 값
1일	Cookie 유지 기간

✏️ 팝업 HTML 구조 만들기

· ‘1일간 보지 않기’ 버튼과 일반 닫기 버튼을 준비합니다.

<div id="popupNotice">
    <div class="popup-content">
        <h2>이벤트 안내</h2>
        <p>새로운 이벤트 내용을 확인해보세요.</p>
    </div>
 
    <div class="popup-btn">
        <button type="button" id="popup-hide">1일간 보지 않기</button>
        <button type="button" id="popup-close">닫기</button>
    </div>
</div>

Colored by Color Scripter

✏️ JavaScript로 Cookie 생성 함수 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Cookie 생성 함수
function setCookie(name, value, days) {
    var date = new Date();
 
    date.setTime(
        date.getTime() + (days * 24 * 60 * 60 * 1000)
    );
 
    document.cookie =
        name + '=' + value +
        ';expires=' + date.toUTCString() +
        ';path=/';
}
 
// Cookie 확인 함수
function getCookie(name) {
    var cookies = document.cookie.split(';');
 
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();
 
        if (cookie.indexOf(name + '=') === 0) {
            return cookie.substring(name.length + 1);
        }
    }
 
    return '';
}
Colored by Color Scripter
cs
 

✨ Cookie의 1일은 어떻게 계산할까?

Cookie의 만료시간은 밀리초(ms)를 기준으로 계산합니다.

days * 24 * 60 * 60 * 1000

days(오늘 날짜)에 1을 전달하면 현재 시간에서 24시간 뒤를 Cookie 만료시간으로 설정합니다.

· 1초 = 1,000ms

· 1분 = 60초

· 1시간 = 60분

· 1일 = 24시간

✏️ ‘1일간 보지 않기’ 버튼에 Cookie 적용하기

사용자가 ‘1일간 보지 않기’ 버튼을 클릭하면 다음 두 가지 동작이 실행됩니다.

① Cookie 저장

setCookie('popup_hide', 'Y', 1);

popup_hide라는 이름으로 Y 값을 저장하고, 유지 기간을 1일로 설정합니다.

② 팝업 숨기기

$('#popupNotice').hide();

Cookie를 저장한 후 현재 화면에 표시되고 있는 팝업을 숨깁니다.

$('#popup-hide').click(function () {
    setCookie('popup_hide', 'Y', 1);
    $('#popupNotice').hide();
});

Colored by Color Scripter

✅‘오늘 하루 보지 않기’와 ‘1일간 보지 않기’의 차이

· 오늘 하루 보지 않기

사용자가 버튼을 클릭한 시점과 관계없이 오늘 날짜를 기준으로 팝업을 숨기는 방식입니다.

예를 들어 오후 11시에 클릭했다면 자정이 지나면서 다시 팝업이 표시되도록 구현할 수 있습니다.

· 1일간 보지 않기

사용자가 버튼을 클릭한 시점부터 24시간 동안 팝업을 숨기는 방식입니다.

따라서 사이트에서 원하는 동작에 따라 날짜 기준 또는 시간 기준으로 구현 방법을 선택하면 됩니다.

✅ 자주 묻는 질문

Q. 홈페이지 팝업을 1일간 보이지 않게 하려면 어떻게 하나요?

A. JavaScript Cookie에 팝업 숨김 상태를 저장하고 Cookie의 만료시간을 1일 뒤로 설정하면 됩니다.

Q. JavaScript Cookie는 얼마나 오래 저장할 수 있나요?

A. Cookie 생성 시 만료시간을 설정할 수 있으며, 예제에서는 현재 시간으로부터 24시간 뒤에 만료되도록 설정했습니다.

Q. ‘닫기’와 ‘1일간 보지 않기’는 무엇이 다른가요?

A. 일반적인 닫기는 현재 화면에서만 팝업을 닫지만, ‘1일간 보지 않기’는 Cookie를 저장해 정해진 기간 동안 팝업이 다시 나타나지 않도록 합니다.

Q. 1일이 아니라 7일 동안 팝업을 숨길 수도 있나요?

A. 가능합니다. setCookie('popup_hide', 'Y', 7)처럼 유지 기간을 변경하면 됩니다.

➰➰➰

홈페이지 팝업의 ‘1일간 보지 않기’ 기능은 JavaScript의 Cookie와 만료시간을 이용하면 비교적 간단하게 구현할 수 있습니다.

특히 setCookie() 함수에서 유지 기간을 지정할 수 있도록 만들어두면 다음과 같이 다양한 기간의 팝업도 쉽게 구현할 수 있습니다.

· setCookie('popup_hide', 'Y', 1); // 1일

· setCookie('popup_hide', 'Y', 3); // 3일

· setCookie('popup_hide', 'Y', 7); // 7일

이처럼 Cookie를 활용하면 기업 홈페이지, 병원 홈페이지, 학원 홈페이지, 쇼핑몰 등

다양한 웹사이트에서 공지사항이나 이벤트 팝업의 노출 기간을 간편하게 제어할 수 있습니다.

에스테틱 홈페이지 디자인 | 고급스러운 웹사이트 HTML 템플릿

블로그 전체목록

최근 포스트