자바스크립트 오늘 하루 창 보지 않기 기능 구현 및 예제코드

브라우저에서 팝업을 사용하는 경우, 사용자들에게 팝업을 일정 기간 동안 다시 보지 않을 수 있는 옵션을 제공하는 것이 좋습니다. 이 글에서는 자바스크립트와 HTML을 활용하여 “오늘 하루 창 보지 않기” 기능을 구현하는 방법에 대해 알아보겠습니다.

1 기본 개념

이 기능은 로컬 스토리지를 활용하여 구현합니다. 로컬 스토리지는 웹 브라우저의 저장소로, 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 사라지지 않습니다. 이를 통해 팝업이 닫힌 시간을 저장하고, 다음에 페이지를 열 때 이 시간을 기반으로 팝업을 다시 표시할지 결정할 수 있습니다.

2. 로컬 스토리지와 쿠키

이 기능을 구현하는 데는 ‘로컬 스토리지’와 ‘쿠키’ 두 가지 방법이 주로 사용됩니다.

‘쿠키’는 사용자의 브라우저에 데이터를 저장하는 방법으로, 웹사이트를 방문할 때마다 해당 정보가 서버에 전송됩니다.
‘로컬 스토리지’는 브라우저가 종료되어도 데이터가 보존되는 특징을 가지고 있습니다. ‘오늘 하루 보지 않기’와 같은 기능에는 주로 로컬 스토리지가 사용됩니다. 이는 단순한 날짜 정보 저장에 적합하며, 웹 사이트의 성능에 덜 영향을 미칩니다.

3. 예제 코드

1. 부모페이지

<!-- 부모 페이지 (parent.html) -->
<!DOCTYPE html>
<html lang="ko">
    <head>
    <meta charset="UTF-8" />
    <title>부모페이지</title>
    <script>
        // 페이지가 로드되면 실행되는 함수
        window.onload = function () {
        // 로컬 스토리지에서 팝업창 닫힌 시간 정보를 가져옴
        var popupCloseTime = localStorage.getItem("popupCloseTime");

        // 팝업창 닫힌 시간 정보가 없거나 현재 시간보다 이전이라면 팝업창을 열음
        if (!popupCloseTime || new Date(popupCloseTime) < new Date()) {
            window.open("popup.html", "popup", "width=400,height=300");
        }
        };
    </script>
    </head>
    <body>
    <h1>부모페이지</h1>
    </body>
</html>

위 코드에서 ‘window.onload’ 이벤트는 페이지가 완전히 로드된 후에 실행됩니다. ‘localStorage.getItem’ 함수는 로컬 스토리지에 저장된 특정 키(‘popupCloseTime’)의 값을 가져옵니다. 그리고 ‘window.open’ 함수는 새로운 창 또는 탭을 열며, 첫 번째 매개변수는 열 페이지의 URL, 두 번째 매개변수는 창의 이름, 세 번째 매개변수는 창의 특성을 설정하는 문자열입니다.

2. 팝업 화면

<!-- popup.html (팝업화면) -->
<!DOCTYPE html>
<html lang="ko">
    <head>
    <meta charset="UTF-8" />
    <title>팝업화면</title>
    <script>
        // 팝업을 닫는 함수
        function closePopup() {
        // 체크박스의 체크 여부를 가져옴
        var dontShowToday = document.getElementById("dontShowToday").checked;

        // 체크박스가 체크되어 있다면
        if (dontShowToday) {
            var now = new Date();
            now.setDate(now.getDate() + 1); // 현재 날짜에서 하루를 더함
            // 다음 팝업이 열리는 시간을 로컬 스토리지에 저장
            localStorage.setItem("popupCloseTime", now);
        }

        // 현재 팝업창을 닫음
        window.close();
        }
    </script>
    </head>
    <body>
    <h1>팝업화면</h1>
    <p>
        <input type="checkbox" id="dontShowToday" />
        <label for="dontShowToday">오늘 하루 이 창을 다시 열지 않음</label>
    </p>
    <button onclick="closePopup()">Close</button>
    </body>
</html>

위 코드에서 ‘document.getElementById’ 함수는 주어진 문자열과 일치하는 ID 속성을 가진 요소를 찾아 반환합니다. ‘localStorage.setItem’ 함수는 주어진 키-값 쌍을 로컬 스토리지에 저장합니다. ‘window.close’ 함수는 현재 브라우저 창을 닫습니다.

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!