다연이네

[days06] 쿠키 (쿠키수정 추가 필요) 본문

JSP

[days06] 쿠키 (쿠키수정 추가 필요)

 다연  2021. 1. 1. 14:22
반응형

[상태 관리]
1. input type = hidden
2. 쿠키 - client(js), server
js: document.cookie 속성 -> 저장, 읽기, 삭제(만료시점을 과거로)
jsp/servlet:
3. 쿠키 ?
ㄱ. 웹브라우저(클라이언트) ->요청(request)-> 아파치톰캣(웹서버) 
URL +  함꼐 쿠키 정보를 서버에 보냄 -> 처리작업(장바구니 등 여러~..)
텍스트 파일
4. 서버(jsp/servlet)에서 쿠키 생성/수정/삭제 (서버에서 해보자)
5. 쿠키 구성
ㄱ. 쿠키이름(필수)
ㄴ. 쿠키값(필수)
ㄷ. 만료시점 : 쿠키유지시간
ㄹ. 도메인 : 쿠키 전송할 도메인
ㅁ. 경로 : 쿠키 전송할 요청 경로
6. 쿠키 생성

 

 

 

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
 <a href="ex02_setCookie.jsp">서버 쿠키 생성</a><br>
 <a href="ex02_getCookie.jsp">서버 쿠키 확인</a><br>
</body>
</html>

 (1) 쿠키 생성 

ex02_setCookie.jsp

<body>
<h3>ex02_setCookie.jsp</h3>
<form action="ex02_setCookie_ok.jsp">
생성할 쿠키 이름 : <input type="text" name="cname" /><br>
생성할 쿠키 값 : <input type="text" name="cvalue" /><br>
<input type="submit" />
</form>
</body>

ex02_setCookie_ok.jsp

 

쿠키 생성하는 방법
 1. Cookie 클래스 객체 생성
 2. response .addCookie(생성한 쿠키 객체)
 3. 클라이언트(웹브라우저) 응답 + 쿠키 파일 생성

<%@page import="java.net.URLEncoder"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 쿠키만 생성할 것이니 화면에 보일 html 코딩 필요 없겠다 -->

<%			
	String cname = request.getParameter("cname");
	String cvalue = request.getParameter("cvalue");
	
	//***[주의]*** 값 저장시
	Cookie cookie = new Cookie(cname, URLEncoder.encode(cvalue,"UTF-8") );
	//cookie.setDomain(domain); 안주면 로컬호스트 잡힘
	cookie.setPath("/"); //경로 WebContent밑의 모든 요청을 쿠키값 가지고 전송하겠다는 의미
	cookie.setMaxAge(-1); //음수 값을 만료시점으로 입력할 경우 웹브라우저를 닫을 때 쿠키 자동 삭제
				//0(즉시 지워라) -1(브라우저 종료시 지워라)
											
	response.addCookie(cookie); //쿠키에 저장하라는 명령
	
	response.sendRedirect("ex01.jsp");
	
	//서버에서 쿠키를 생성하는 게 아니라 명령을 내리는 것 (알려주는 역할 뿐) 실제 저장은 안일어남
	//명령어가 들어있다고 생각
%>

 

 (2) 쿠키 확인 

ex02_setCookie.jsp

ex02_getCookie.jsp

<%@page import="java.net.URLDecoder"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
<h3>ex02_getCookie.jsp</h3>
<form action="">
  <%
    //서버에서 쿠키값을 읽어오는 방법: 
    //1. 모든 쿠키 객체를 얻어온다. Cookies 클래스[]  - request.getCookies() 메소드 존재
    String cname;
    String cvalue;
  
    Cookie[] cookies = request.getCookies();
	  for(Cookie cookie : cookies){
	   cname = cookie.getName();
	   cvalue = URLDecoder.decode( cookie.getValue(),"UTF-8");
	   
	  
%>
	<input type="checkbox" name="ckbCookie" value="<%=cname %>" /><%=cname %>-<%=cvalue %>
	<br>
<%
 	 }
  %>
</form>

<a href="ex02_deleteCookie.jsp" id="delLink">쿠키 삭제</a>
<a href="ex02_editCookie.jsp" id="editLink">쿠키 수정</a>
<a href="ex01.jsp" >쿠키 HOME</a>

<script>
$("#delLink, #editLink").click(function(event) {
	event.preventDefault();
	//$(":checked").val() 하나하나 얻어와 경로 뒤에 ?ckbCookie=id&ckbCookie=age
	//location.href=$(this).attr("href")+"?ckbCookie=id&ckbCookie=age";
	
	//꼭 기억
	var queryString = $("form").serialize(); 
    //직렬화 : 코딩으로 할 작업을 자동으로 input태그의 value 값들을 &연산자로 만들어줌
	//alert(queryString); 
	location.href=$(this).attr("href")+"?"+queryString;
});
</script>
</body>
</html>

 

 (3) 쿠키 삭제 

ex02_deleteCookie.jsp?파라미터

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	//js 쿠키 삭제 : 쿠키 생성 + 만료시점(-10)을 과거로 설정해서 
	
	//서버에서 쿠키 삭제 : 개념 똑같다 
	//		쿠키 생성 + getMaxAge(0)
	
	
	//?ckbCookie=id&ckbCookie=age
	String [] delete_cnames = request.getParameterValues("ckbCookie");
	for(int i=0; i<delete_cnames.length;i++){
		String cname= delete_cnames[i];
		Cookie cookie = new Cookie(cname, "");
		cookie.setPath("/");
		cookie.setMaxAge(0); // 쿠키삭제 -1(브라우저 닫으면 자동 삭제)
		
		response.addCookie(cookie);
	}
%>
<script>
	alert("체크한 모든 쿠키 삭제 완료");
	location.href="ex02_getCookie.jsp"; //sendRedirect와 똑같음
</script>

자동으로 돌아감

다시 쿠키 하나 추가한 후 수정 해보기

 (3) 쿠키 수정 

ex02_edit.jsp?파라미터

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
<form action="ex02_editCookie_ok.jsp">
	<ul>
	<%
		String [] delete_cnames = request.getParameterValues("ckbCookie");
		for(int i=0; i<delete_cnames.length;i++){
			String cname= delete_cnames[i];
	%>
	<li>
	<%=cname %> : <input type="text" name="<%=cname %>" value="원래쿠키값" />
	</li>
	<%
		}
	%>
	</ul>
	<input type="submit" value="쿠키 수정"/>
</form>
</body>
</html>

텍스트 박스에 수정할 값을 입력한다.

 

반응형
Comments