2024. 8. 18. 10:08ㆍ자바 웹 개발/세션 쿠키 필터 리스너
두 개의 html 파일을 준비한다. 팝업창 제어는 자바스크립트를 통해 진행한다.
popUpTest는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트에서 쿠키 사용</title>
<script type="text/javascript">
window.onload = pageLoad;
function pageLoad(){
notShowPop = getCookieValue();
if(notShowPop!="true"){
window.open("popUp.html", "pop", "width=400,height=500,history=no,resizable=no,status=no,scrollbars=yes,menubar=no");
}
}
function getCookieValue(){
var result = "false";
if(document.cookie != ""){
cookie = document.cookie.split(";");
for(var i=0; i<cookie.length;i++){
element=cookie[i].split("=");
value=element[0];
value=value.replace(/^\s*/,'');
if(value=="notShowPop"){
result=element[1];
}
}
}
return result;
}
function deleteCookie(){
document.cookie = "notShowPop=" + "false" + ";path=/; expires=-1";
}
</script>
</head>
<body>
<form>
<input type=button value="쿠키삭제" onClick="deleteCookie()">
</form>
</body>
</html>
window.onload = 함수 : 브라우저에 웹 페이지가 로드될 때 함수를 호출
window.open() = 새 브라우저 창이나 탭을 열기 위해 사용되는 메서드이다.
window.open()은 JavaScript에서 새 브라우저 창이나 탭을 열기 위해 사용되는 메서드입니다. 이 메서드는 주로 링크를 클릭하거나, 버튼을 눌렀을 때 특정 URL을 새로운 창이나 탭에서 열고 싶을 때 사용됩니다.
기본 문법
- url: 열고자 하는 웹 페이지의 URL을 지정합니다. 이 매개변수를 생략하거나 빈 문자열로 두면 빈 창이 열립니다.
- windowName: 새 창이나 탭의 이름을 지정합니다. _blank로 설정하면 새 탭 또는 창이 열리며, 기존에 지정한 이름이 있는 경우 해당 이름의 창이 다시 사용됩니다. _self는 현재창에 열기며 기본값이다.
- windowFeatures: 새 창의 다양한 속성(크기, 위치, 상태 등)을 제어하는 문자열입니다. 여러 속성을 콤마(,)로 구분하여 지정할 수 있습니다.
예제
- 새 창 열기 (기본적인 사용법)이 코드는 https://www.example.com을 새 탭에서 엽니다.
- 특정 창 이름으로 열기이 코드는 _blank 이름을 사용하여 새 창이나 탭에서 페이지를 엽니다.
- 창의 속성 지정하기이 코드는 너비가 600픽셀, 높이가 400픽셀인 새 창에서 https://www.example.com을 엽니다.
- 팝업 창 열기 코드는 팝업 창을 열며, 스크롤바와 크기 조절이 가능한 창을 만듭니다.
-
window.open('https://www.example.com', 'popup', 'width=600,height=400,scrollbars=yes,resizable=yes');
windowFeatures에 사용할 수 있는 옵션
- width : 창의 너비를 지정합니다.
- height : 창의 높이를 지정합니다.
- left : 창의 왼쪽 위치를 지정합니다.
- top : 창의 위쪽 위치를 지정합니다.
- resizable : 창 크기 조절 가능 여부를 설정합니다 (yes 또는 no).
- scrollbars : 스크롤바의 사용 여부를 설정합니다 (yes 또는 no).
- status : 상태 표시줄의 표시 여부를 설정합니다 (yes 또는 no).
- menubar : 메뉴바의 표시 여부를 설정합니다 (yes 또는 no).
- toolbar : 툴바의 표시 여부를 설정합니다 (yes 또는 no).
- history : 부모 페이지의 탐색 기록에 접근하지 못하도록 하는 목적으로 사용되나 최신 브라우저에서는 무시해도 된다.
주의 사항
- 일부 브라우저는 보안상의 이유로 window.open()이 사용자 상호작용 없이(예: 클릭 이벤트 없이) 호출되는 것을 제한할 수 있습니다.
- 팝업 차단기가 활성화된 경우, window.open()을 사용해도 새 창이나 탭이 열리지 않을 수 있습니다.
이 메서드는 사용자가 브라우저의 기본 설정에 따라 동작이 달라질 수 있으므로, 신중하게 사용해야 합니다.
https://www.w3schools.com/jsref/met_win_open.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
// 쿠키 예시 username=JohnDoe; theme=dark; sessionToken=abc123
쿠키 정보를 세미콜론으로 분리하고, 다시 '='으로 분리한다.
element[0] 은 이름이고, element[1]은 값이다.
공백을 제거한 뒤에 이름이 notShopPop이면 이를 가져와 반환한다.
아래는 popUp.html 파일이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setPopUpStart(obj){
if(obj.checked==true){
var expireDate = new Date();
var days = 1;
expireDate.setDate(expireDate.getDate() + days);
document.cookie = "notShowPop=" + "true" + ";path=/; expires=" + expireDate.toGMTString();
window.close();
}
}
</script>
<title>Insert title here</title>
</head>
<body>
알림 팝업창입니다.
<br><br><br><br><br><br><br><br>
<form>
<input type=checkbox onClick="setPopUpStart(this)"> 오늘 더 이상 팝업창 띄우지 않기
</form>
</body>
</html>
쿠키의 유효 일자는 반드시 GMT(Greenwich Mean Time) 포맷으로 설정해야 한다. date.toUTCString을 사용하면 해당 포맷으로 쉽게 변경할 수 있다. GMTString도 가능하나 최신 브라우저는 지양된다.
https://ko.javascript.info/cookie
쿠키와 document.cookie
ko.javascript.info
'자바 웹 개발 > 세션 쿠키 필터 리스너' 카테고리의 다른 글
| [Web] 세션을 이용한 로그인 정보 바인딩하기 (0) | 2024.08.19 |
|---|---|
| [Web] 세션 유효 기간 설정 / 세션 삭제하기 (0) | 2024.08.19 |
| [Web] 세션을 이용한 웹 페이지 연동 기능 (0) | 2024.08.19 |
| [Web] 쿠키 / Persistence 쿠키 / Session 쿠키 (0) | 2024.08.18 |
| [Web] 세션 트래킹 / hidden 태그 / URL Rewriting (0) | 2024.08.17 |