*쿠키(cookie): 브라우저에 할당된 저장소
👉🏻 쿠키를 발급한 url 주소에서만 사용 가능
👉🏻 관리자 도구 - 애플리케이션 - 쿠키에서 확인 가능
👉🏻 사용자가 사용하고 있는 서버에서 만들어져서 사용자의 컴퓨터 (브라우저)에 저장하는 정보
👉🏻 키-밸류 세트로 저장
👉🏻 누구든지 임의로 생성/수정/삭제할 수 있어서 보안과 관련 없는 기능을 다룰 때 사용
(보안상 웹 사이트에서는 만들지 않는 것을 권장 / 모바일은 본인만 사용하는 경우가 많아 자주 쓰임)
쿠키 창 예시(네이버)
❓ Domain: 누가 이 쿠키를 발급해 줬는지
❓ Expires / Max Age: 만료 일자
📍 사용 예시
✔️광고 팝업
오늘 동안 보지 않기 클릭 시 새로운 쿠키가 생기면서 Expires/ Max Age에 그리니치 천문대 기준의 시간으로 24시간 동안(적용은 우리나라 시간으로 됨) 팝업이 뜨지 않도록 쿠키 생성
✔️ 로그인 시 아이디 저장 체크
아이디를 아이디칸에 저장해 놓는 쿠키 생성, 생성 후에도 관리자 도구에서 값 내용을 바꾸면 바꾼 아이디값이 적용됨
✔️ 로그인 유지
로그인 성공 시 특정 이름을 갖는 쿠키 생성하고 해당 쿠키가 존재하면 로그인한 상태로 판단 / 로그아웃 시 해당 쿠키 삭제
(보통 "AUTH"라는 이름으로 쓰임)
쿠키 생성
- 쿠키는 객체를 생성한 다음 응답 정보에 같이 첨부해서 브라우저로 넘겨야지만 사용 가능
- 쿠키 생성 시 name(키값), value(밸류값) 세트로 반드시 지정해야 함
- name, value는 모두 문자열이어야만 함
- name이 중복될 경우 덮어씌워짐
- expires(max age - 만료기간)은 초 단위로 작성, 필수 아닌 옵션이지만 작성하는 것을 권장!
📝 표현법
Cookie cookie = new Cookie("name", "value");
cookie.setMaxAge(초단위시간);
쿠키 삭제
- 쿠키 삭제 구문은 따로 명령어 없음
- 그 대신 같은 키값으로 쿠키를 하나 생성하고 (덮어씌워짐), 그 쿠키의 만료 시간을 0으로 세팅
*아이디 저장 쿠키
menubar.jsp
👉🏻 Before-1) 기존의 아이디/비밀번호 입력 창 밑에 아이디 저장 버튼 만들고 오른쪽 정렬
✔️controller에서 쿠키 객체 생성 후 하기 작업 진행 ✔️
👉🏻 After-1) 상단 스크립틀릿으로 쿠키 불러오기
👉🏻 After-2) script 구문 작성
// After-1) 상단 스크립틀릿으로 쿠키 불러오기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="com.kh.member.model.vo.Member"%>
<%
// 쿠키 불러오기
// => request.getCookies() 메소드 => Cookie 타입의 배열로 리턴
Cookie[] cookies = request.getCookies();
// 배열에 담긴 여러 개의 쿠키 세트들 중에 내가 원하는 쿠키만 골라내는 작업 진행
String saveId = "";
if(cookies != null) {
for(int i = 0; i < cookies.length; i++) {
// System.out.println(i + " : " + cookies[i].getName() + " / " + cookies[i].getValue());
// 서버는 기본적으로 JSSESIONID라는 쿠키를 만들어 줌
// 쿠키로부터 name(키값)을 뽑아내려면 getName(), value(밸류값)을 뽑아내려면 getValue() 메소드 이용
if(cookies[i].getName().equals("saveId")) {
saveId = cookies[i].getValue();
break; // 안 걸어도 상관없지만 쿠키가 많은 경우 해당 쿠키를 찾은 이후로는 굳이 계속 반복 돌면서 낭비할 필요가 없음!
}
}
}
// 이 시점 기준으로 "saveId"라는 키값을 가진 쿠키가 있었다면 String 타입으로 saveId라는 변수에 해당 아이디값 자체가 담겨 있을 것!
%>
// Before-1) 기존의 아이디/비밀번호 입력 창 밑에 아이디 저장 버튼 만들고 오른쪽 정렬
// 기존의 회원가입 버튼으로 위치 확인할 것
<tr align="right">
<th colspan="2">
<input type="checkbox" id="saveId" name="saveId" value="y">
<label for="saveId">아이디 저장</label>
</th>
</tr>
<tr>
<th colspan="2">
<button type="submit">로그인</button>
<button type="button" onclick="enrollPage();">회원가입</button>
</th>
</tr>
</table>
</form>
// After-2) script 구문 작성 *주석으로 위치 확인*
<script>
// 모든 요소들이 화면에 다 로딩된 후 saveId라는 자바 변수에 저장된 값을 불러와서
// 아이디 입력창에 value 속성으로 설정해 둘 것 & 아이디 저장하기 체크박스에 체크 수행
$(function() {
var saveId = "<%= saveId %>"; // "user01" / ""
if(saveId != "") { // 쿠키가 있는 경우
$("#login-form input[name=userId]").val(saveId);
$("#saveId").attr("checked", true);
} // 쿠키가 없는 경우에는 해당 if문을 타지 않으므로 애초에 checked 되지 않음! 즉, else문 필요 없음!
});
// *위치 확인용 주석* function enrollPage() {
</script>
LoginController
👉🏻 요청 시 넘길 값에 아이디 저장 여부를 함께 넘기고, 쿠키 객체 생성, 조건 부여
👉🏻 Cookie 임포트 경로: javax.servlet.http.Cookie
// 요청 시 리턴값
// userId: 아이디값
String userId = request.getParameter("userId"); // "user01"
// userPwd: 비밀번호값
String userPwd = request.getParameter("userPwd"); // "password01"
// saveId : 아이디 저장 여부에 대한 체크값
String saveId = request.getParameter("saveId"); // 체크를 했다면 "y", 하지 않았다면 null 값이 넘어옴
if(saveId != null && saveId.equals("y")) {
// 아이디를 저장하겠다
// => userId라는 키값으로 넘겨받았던 아이디값을 쿠키로 저장
Cookie cookie = new Cookie("saveId", userId); // "saveId" - "user01"
// 1분 == 60초
// 1시간 == 60분 == 60 * 60초
// 하루 == 24시간 == 1 * 24 * 60분 == 1 * 24 * 60 * 60초
// 이틀 == 48시간 == 2 * 24 * 60분 == 2 * 24 * 60 * 60초
cookie.setMaxAge(1 * 24 * 60 * 60); // 만료기간 1일 (초단위 작성)
// 쿠키를 브라우저로 넘기기 => 응답 정보에 첨부함 (response 객체 사용)
response.addCookie(cookie);
} else {
// 아이디를 저장하지 않겠다
// => 아이디를 저장하고 있었던 쿠키 자체를 삭제
// (쿠키를 삭제시키지 않으면 만료일까지 계속 살아 있기 때문)
Cookie cookie = new Cookie("saveId", userId);
cookie.setMaxAge(0); // 0초
response.addCookie(cookie);
}
![](https://blog.kakaocdn.net/dn/c9B4rQ/btrPx1QJRz0/zuoy8CZmUamH9LB6kKd870/img.png)
아이디 저장 안 하고 로그인
![](https://blog.kakaocdn.net/dn/deD7Po/btrPyVCaeCh/gZ47pZkQKoMNOAWhYwsDT1/img.png)
쿠키 없음
![](https://blog.kakaocdn.net/dn/pVzaP/btrPyGkW2xT/3LWI3LJN1noLVd62hza64k/img.png)
아이디 저장 후 로그인
![](https://blog.kakaocdn.net/dn/DzbFs/btrPx1wsI8q/nWdIFkojRfMm8zOlKfX5H1/img.png)
쿠키 생성
*메인 페이지 광고 팝업 쿠키
index.jsp
👉🏻 모달창을 닫아 주는 부트스트랩 메소드: .modal("hide");
👉🏻 모달창을 열어 주는 부트스트랩 메소드: .modal("show");
<!-- 메인페이지의 상단에 항상 menubar.jsp 가 존재하도록 include -->
<%@ include file="views/common/menubar.jsp" %>
<!-- 메인 페이지에 광고 팝업이 뜰 수 있게끔, 부트스트랩 모달창 복붙 -->
<!-- The Modal -->
<div class="modal" id="adModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">오늘 하루 특가!</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="<%= contextPath %>/resources/images/ad.jpg" width="400">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="checkbox" id="mainPop" name="mainPop">
<label for="mainPop">24시간 동안 보지 않기</label>
</div>
</div>
</div>
</div>
<script>
$(function() {
// 메인 페이지(index.jsp)를 응답해 주는 서블릿이 존재하지 않기 때문에
// 서버단에서 쿠키를 생성해서 첨부할 수가 없음 => 프론트단에서 자바 스크립트로 쿠키를 만들어 줘야 함
// 24시간 동안 보지 않기 체크박스가 클릭되는 순간 mainPop이라는 키값을 가진 쿠키 생성
$("#mainPop").click(function() {
// 광고창 닫기
$("#adModal").modal("hide");
// 쿠키 생성 => mainPop의 여부만 검사할 것이기 때문에 쿠키의 value는 그냥 형태에 맞게 하드코딩 할 것
// 현재 시간 불러오기 => 하루를 더해 주기 (setDate() 메소드 활용)
var today = new Date();
today.setDate(today.getDate() + 1); // 날짜를 세팅해 주는 메소드
// 자바스크립트에서 쿠키를 생성하려면
// document 객체에서 제공하는 cookie 속성에 접근해야 함
// 단순히 문자열 대입만으로 쿠키가 생성될 수 있음
// 단, 형식에 맞는 문자열을 대입해야 함! => "키=밸류"; expires=만료시간"
// (이때 만료시간은 UTC 기준으로 잡아 줘야 함 - 세계 표준시)
document.cookie = "mainPop=n; expires=" + today.toUTCString();
console.log(document.cookie); // "mainPop=n"
});
// 클릭 이벤트 밖에 mainPop 이라는 쿠키가 있나 검사
// => document.cookie 속성값에 "mainPop=n"이 포함되었나 검사해야 함
// 자바 스크립트에서 문자열 포함 관계를 나타내 주는 메소드 : 문자열.inclues("문자열")
if(document.cookie.includes("mainPop=n")) {
// mainPop 이라는 쿠키가 있다. == 24시간 동안 광고창을 보지 않겠다
$("#adModal").modal("hide");
} else {
// mainPop이라는 쿠키가 없다 == 광고창이 보여도 상관없음
$("#adModal").modal("show");
}
});
</script>
![](https://blog.kakaocdn.net/dn/Du91q/btrPAIIHu09/EEXkpVTOOajv4cLy8nBik0/img.png)
메인 페이지 접속했을 때 모달창
![](https://blog.kakaocdn.net/dn/6Qy2n/btrPzMkpukv/WRgUIGZd8eFEJ5jRx8UajK/img.png)
그냥 X 버튼 눌렀을 때 (쿠키 없음)
![](https://blog.kakaocdn.net/dn/bZ0bm2/btrPz1Phuag/yF9NDyFNLfK59YfwOkl3Tk/img.png)
24시간 동안 보지 않기 체크 시 (쿠키 생성, expires 시간이 하루 뒤로 설정돼 있음)