내가 만든 쿠키 (하루 동안 보지않기)

환경: spring+jquery

 

알림창을 팝업으로 구현 후 쿠키를 사용하여 하루 동안 보지 않기를 구현해보자

HTTP 쿠키(HTTP cookie)란...

웹 서버에 의해 사용자의 컴퓨터에 저장되는 '이름을 가진 작은 크기의 데이터'이다.

쿠키는 다음의 요소로 구성된다

1.이름

2. 값

3. 0개 이상의 속성 (이름/값). 속성은 쿠키의 만료 기간, 도메인, 플래그(예: Secure 및 HttpOnly) 등의 정보를 저장한다.

[위키백과]

HTTP 쿠키는 이름을 통해 데이터를 식별하고 관리한다.

예를 들어, 사용자의 로그인 상태를 추적하기 위해 session_id라는 이름의 쿠키가 사용될 수 있음.

 

---

우선 부모창에서  팝업을 호출해보자

window.onload = function() {
    alarmPopupData();     
}

// ajax로 컨트롤러에서 데이터 가져오기
function alarmPopupData() {
    $.ajax({
        url: "<c:url value='/cmm/getAlarmPopData.do'/>",
        type: "POST",
        dataType: "json",
        success: function(data) {
        	var rList2 = data.rList2;
            console.log(rList2);
            
            var noArray2 = [];
            for (var i = 0; i < rList2.length; i++) {
                if (rList2[i].testOrgDisplYn === 'Y') {
                    noArray2.push(rList2[i].no);
                }
            }
            var alarmNo = noArray2.join(',');
            var listSize2 = noArray2.length;  
            
            fn_autoAlarmPop(listSize2, alarmNo);
        },
        error: function(xhr, status, error) {
            alert(error);
        }
    });
}

// 알림사항 자동 팝업 
function fn_autoAlarmPop(listSize2, alarmNo) {
    for (let i = 0; i < listSize2; i++) {
        var no = alarmNo.split(',')[i];
        // 쿠키 유무 확인 후 팝업을 연다
        if (!getCookie('alarmPopupClose_' + no)) {
            popupOpen(no, i + 1, 'alarm');
        }
    }
}

function popupOpen(no, index, type) {
    var popWidth = 650;
    var popHeight = 250;
    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;
    var positionX = (screenWidth - popWidth) / 2;
    var positionY = (screenHeight - popHeight) / 2;
    var identity  = type + "_" + no;  
    var url = 본인 url

    window.open(url, "POP" + identity, "top=" + positionY + ", left=" + positionX + ", width=" + popWidth + ", height=" + popHeight + ", toolbar=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no");
}

// 쿠키 가져오기
function getCookie(name) {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? value[2] : null;
}

 

부모창에서 팝업을 띄웠다

팝업창 코드

$(document).ready(function(){
	responsePopupData()	
});

// 여기서 쿠키를 설정한다
// date 값은 setCookie 함수가 호출된 시간부터 하루
function setCookie(name, val, exp) {
	var date = new Date();
	date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
	
	document.cookie = name + "=" + val + ";expires=" + date.toUTCString() + "; path=/; domain=" + window.location.hostname;
}

// 하루 동안 보지 않기
function fn_closePop() {
	var no = $("#no").val();
	
    // 쿠키 이름 설정!
    // alarmPopupClose_알림번호 로 이루어져있다.
	setCookie('alarmPopupClose_' + no, 'true', 1);
	window.close();
}

function responsePopupData() {
	
	var no = $("#no").val();
	
	$.ajax({
	    url: "<c:url value='/cmm/getAlarmPopData.do'/>",
	    type: "POST",
	    dataType: "json",
	    data: {no: no},
		success: function(data) {
			var rList2 = data.rList2;
			var item = rList2.find(function(item) { return item.no == no; });
			
				$('#titl').text(item.titl);
				$('#content').text(item.content);
				
				console.log("넘버 >> " + item.no);
				console.log("카테고리 >> " + item.div);
			
		},
	    error: function(xhr,status,error){ alert("에러>>"+error); }
	});
}

 

쿠키의 이름으로 구분하여 하루 동안 보지 않기 유무를 확인하는 것을 알 수 있다.

 

 

개발자도구에서 확인하면

이름 / value (true 일 경우 활성화) / 도메인 / path / 활성화 시간

을 확인할 수 있다

 

완료