본문 바로가기
CLASS/SERVLET

#6-2 / session,cookie

by eungSe__ 2024. 6. 18.
❓

cookie
브라우저의 cache 메모리에 값을 저장하는 방식
최대 20개까지밖에 저장 불가(cache 메모리에 한계가 있음 - 4KB)
java,js 둘다 있음 (back,front)
최근엔 cookie로 사용하는 형태에서 storage사용하는 형태를 주로 사용하는게 추세
ex) 오늘 하루 팝업 닫기 , 아이디 저장

session 
일정시간동안 브라우저에 해당 값을 저장,유지시키는 방식(일정시간 지나면 파기됨)
java (backend전용)
server , web.xml 에서 세팅
브라우저별로 각각 작동됨, 사용 브라우저 닫았다가(tab x) 키면 파기됨
ex) 은행 로그인시 일정시간 유지
<!-- web.xml -->
<session-config>
    <!-- 5분후 session 자동 파기 - 5분이 가장 기본 , 여긴 분단위-->
    <!-- server에서 세팅시 초단위 -->
    <session-timeout>5</session-timeout>
</session-config>​


storage(session)
cache메모리
localstorage(js-frontend) , sessionstorage(backend)
key값 중복 불가

- localstrage
브라우저에 지속적으로 내용이 저장되어서 사용하는 형태
장바구니 등 에 프론트가 주로 사용 (끄고 다시 접속해도 계속 남아있음)

- sessionstorage
해당 브라우저만 종료 하더라도 자동 삭제가 되는 기능이 탑재되어 있음
해당 페이지에서만 일시적으로 실행되기 때문에 백엔드가 주로 사용



🔽 🔽 이 세개를 각각 분리시켜줘야 👍

 

✅ session

 

session1 : session 생성   ▶   session2 : session 사용  ▶   session3 : session 삭제

⚡ session1.java ( session 생성 )
 
public class session1 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String userid = "apink";
		String username = "에이핑크";
		
		HttpSession session = request.getSession(); //cache메모리 활성화
		
		//session을 생성함(setAttribute)
		session.setAttribute("id", userid);
		session.setAttribute("name", username);
	}

}


HttpSession는 interface

 

⚡ session2.java  (session 사용)
 
public class session2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		HttpSession session = request.getSession();
		
		//cache메모리에 있는 session값을 가져오는 형태
		System.out.println(session.getAttribute("id"));
		System.out.println(session.getAttribute("name"));
		//1->2로 오면 1에서작성한 값 잘 뜸 
		
		//300출력 : web.xml에서 setting한 5분
		System.out.println(session.getMaxInactiveInterval());
	}
}


getMaxInactiveInterval() : session 유지 시간을 확인하는 클래스

 

⚡ session3.java ( session 삭제 )
 
public class session3 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		HttpSession session = request.getSession();
		//session.invalidate();
		//3->2로 가면 둘다 null뜸
		
		session.removeAttribute("name");
		//3->2로 가면 apink,null뜸
	}
}


invalidate() : 모든 session값을 파기

 

✅ cookie

쿠키를 굽는다 : 생성

쿠키를 부순다 : 삭제(파기)

⚡ cookie.html


- cookie 생성
 
<body>
	<input type="button" value="쿠키삭제" onclick="cookie_del()">
</body>

<script type="text/javascript">
	console.log(document.cookie); //cookie data 출력
	//document.cookie = "홍길동"; //cookie 생성
	
	var today = new Date();
	var day = today.setTime(today.getTime()+24*60*60*1000);
        //today.setDate(today.getTime()+1); 요샌 이렇게 써도 됨 - 알아서 계산해줌
	console.log(today.toUTCString()); 
	
	document.cookie = "mid=apink33; domain=172.30.1.83; expires="+today.toUTCString(); 
</script>

expires는 pc시간으로 기입해야함 무족권~!!
pc시간  : Wed, 19 Jun 2024 07:34:56 GMT 이렁거

path : 해당 쿠키가 어느 경로에서 만들어졌는지 확인 , 사용 잘안함
domain은 실제 도메인과 반드시 일치시켜야함 => 불일치시 규정위반

GMT : 평균시 , UTC : 협정시간
GMT든 UTC든 KST(한국시간): +9시긴 추가해야만 정상적인 쿠키 작동여부시간을 설정

시간세팅도 완료




- cookie 삭제

<body>
	<input type="button" value="쿠키삭제" onclick="cookie_del()">
</body>

<script type="text/javascript">
	//cookie 삭제
	function cookie_del(){
		//cookie의 이름값을 정확하게 가져와야함
		document.cookie = "mid=; domain=;"; //값들이 사라짐
        
		//넣어줄때의 name값기준으로 삭제되기때문에 name값 필히 작성
		//document.cookie = "mid=;";
	}
</script>




- cookie로 제어하기

<body>
	<div id="popup">레이어팝업</div>
	<input type="button" value="쿠키생성" onclick="aaa()"><br><br>
	<input type="button" value="쿠키삭제" onclick="bbb()">
</body>

<script type="text/javascript">
	//해당 페이지 실행시 즉시 발동하는 함수
	window.onload = function(){
		var ck = "pop="; 
		console.log(document.cookie) //mid=; pop=Y 출력
		
		var sp = document.cookie.split(ck); //쿠키값을 확인하여 팝업 여부를 체크
		if(sp[1]=="Y"){
			document.getElementById("popup").style.display="none";
		}
	}

	function aaa(){ //쿠키생성
		var today = new Date();
		today.setDate(today.getDate()+1); //cookie 1일동안 유지(이건 getDate임)
		
		document.cookie = "pop=Y; expires="+today.toUTCString();
	}
	
	function bbb(){ //쿠키삭제
		document.cookie = "pop=;";
	}
</script>



window.onload = function(){
    var sp = document.cookie.split("&"); //['pop=Y', 'Wed, 19 Jun 2024 06:45:06 GMT']

    var today = new Date();
    today.setDate(today.getDate());

    console.log(sp[1]);
    console.log(today.toUTCString())

    if(sp[1] < today.toUTCString()){
    	//해당 시간 이전일 경우는 팝업을 출력하지 않음
        document.getElementById("popup").style.display = "none";
    }else{
		//해당 시간 이후의 경우 expires 삭제되면서 else 작동 => 팝업이 출력됨
        document.getElementById("popup").style.display = "block";
    }
}

function aaa(){ 
    var today = new Date();
    today.setDate(today.getDate()+1); //cookie 1일동안 유지
    var data = "Y&"+ today.toUTCString(); //Y&쿠키가 유지되는 날짜와 시간
    document.cookie = "pop="+data+";expires="+today.toUTCString();
}

=> 날짜 비교를 위해 이렇게 세팅하기도 함 : pop=Y&세팅할날짜시간
     앞의 Y로 반복문-> 뒤의 세팅할날짜시간과 진짜 지금시간 비교해서 작업

     이거 좀 중구난방.. 아래예제 보셈

 

⚡ jquery 이용한 레이어 팝업창 제어하기(쿠키)
 
<body>
	<div class="popup" id="popup">
		<span class="close" id="close">X</span>
		<label><input type="checkbox" id="ck">오늘하루 그만 보기</label>
	</div>
</body>

<script type="text/javascript">
	$(function(){
		
		var $today = new Date();
		var $totime = $today.setDate($today.getDate());
		var $sp = document.cookie.split("=");
		
		// ! 시간이 오버되면 쿠키는 자동적으로 삭제됨
		console.log($sp)
		if($totime > $sp[1] || $sp[0] == ""){ 
			//오늘시간이 쿠키시간보다 큰경우, 아예 시간이 오버되어 쿠키가 삭제되어버린 경우
			$("#popup").css("display","block");
		}else{ 
			//오늘시간보다 쿠키시간이 더 큰경우
			$("#popup").css("display","none");
		}
		

		$("#close").click(function(){
			var $ck_enum = $("#ck").is(":checked");
			if($ck_enum == true){
				//체크박스 체크되어있고 + 버튼 클릭시 쿠키 생성
				var $day = new Date();
				var $time = $day.setDate($day.getDate()+1); //현재시간 + 1day

				//expires는 pc시간으로 기입해야함 무족권~!! Wed, 19 Jun 2024 07:34:56 GMT 이렁거
				document.cookie = "adpop="+$time+"; expires="+ $day.toUTCString();
				console.log($day.toUTCString())
			}
			
			$("#popup").fadeOut();
		})
	})
</script>


❗ 시간이 오버되면 쿠키는 자동적으로 삭제됨
∴ 반복문 오늘시간이 쿠키시간보다 큰경우, 아예 시간이 오버되어 쿠키가 삭제되어버린 경우 : 보이게
   로 잡아줘야함~

 

'CLASS > SERVLET' 카테고리의 다른 글

#7-1 / 회원 가입 후 로그인,로그아웃  (0) 2024.06.19
#6-3 / storage  (0) 2024.06.18
#6-1 / 간편 회원가입⭐  (0) 2024.06.18
#5 / 🌺 MVC? / excute,statement정리  (0) 2024.06.17
#4-2 / 동의 체크박스 Map 배열로 받기  (0) 2024.05.31

관련글

티스토리툴바