쿠키와 세션
https://interconnection.tistory.com/74
세션 | 쿠키 | |
사용예 | 로그인 | 쇼핑정보 |
저장위치 | 서버 | 브라우저 |
속도 | 느림 | 빠름 |
보안 | 높음 | 낮음 |
세션과 쿠키의 차이점
쿠키는 이름, 값, 유효시간, 도메인, 경로등을 저장합니다.
클라이너트에 총 300개의 쿠키를 저장할 수 있습니다.
쿠키는 도메인당 20개만 가질 수 있습니다.
쿠키 크기는 4096byte(4KB)까지만 저장할 수 있습니다.
쿠키/세션은 캐쉬와 다릅니다.
https://dev-coco.tistory.com/61
자동로그인
login.jsp >체크박스로 아이디저장 만들기(쿠키에 저장)
<div class="mb-3 row">
<div class="col-sm-12 text-start">
<input type="checkbox" class="saveID" id="saveID">
<label for="saveID">아이디 저장</label>
</div>
</div>
아이디와 패스워드가 비어있지 않고, 아이디저장(체크박스)에 체크가 되어있는 사람 -> 아이디 저장되게 만들기
form 태크 부분 스크립트 하나도 안짜서 이것 먼저 만들러간다.
<form action="./login" method="post">
스크립트로 체크를 할거라서 버튼에 체크를 추가해 준다.
<button type="submit" class="btn btn-primary check">로그인</button>
헤드안에 스크립트 만들기. =</head> 위에 만들기
<script type="text/javascript">
$(function(){
alert("구동하려면 제이쿼리가 필요합니다. ")
});
</script>
제이쿼리가 없어서 구동이 안된다.
제이쿼리 3.7.1 버전
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==
" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
id칸, pw칸 검사
스크립트만들기
<script type="text/javascript">
$(function(){
// alert("구동하려면 제이쿼리가 필요합니다. ")/* 제이쿼리가 아래쪽에 있어서 구동이 안돼 */
//아이디칸, pw칸 검사
$('.check').click(function(){
let id = $('#id').val();
let pw = $('#pw').val();
if(id == ''|| id.length < 3){
Swal.fire("", "올바른 아이디를 입력하세요.","warning");
//alert('아이디 문제');
$('#id').focus();
return false;
}
if(pw == ''|| pw.length < 3){
Swal.fire("", "올바른 비밀번호를 입력하세요.","warning");
//alert('비밀번호 문제');
$('#pw').focus();
return false;
}
//쿠키에 id저장하기
//if문으로 사용자가 아이디 저장 눌렀어?
if($('#saveID').is(':checked')){
alert("아이디 저장을 눌렀어요");
}
$('#loginForm').submit();
});
});
</script>
버튼 수정
<button type="button" class="btn btn-primary check">로그인</button>
form id 추가
<form action="./login" method="post" id="loginForm">
$('.check').click(function(){ 안에 $('#loginForm').submit(); 추가 >실제로 로그인 된다.
if문으로 사용자가 아이디 저장 눌렀어? 만들기
//쿠키에 id저장하기
//if문으로 사용자가 아이디 저장 눌렀어?
if($('#saveID').is(':checked')){
alert("아이디 저장을 눌렀어요");
$('#loginForm').submit();
});
ID불러와서 저장하기
>setCookie("userInputId" , id, 60);
//쿠키에 id저장하기
//if문으로 사용자가 아이디 저장 눌렀어?
if($('#saveID').is(':checked')){
//alert("아이디 저장을 눌렀어요");
//ID불러와서 저장하기
setCookie("userInputId" , id, 60); //쿠키 저장하는 함수
}
$('#loginForm').submit();
});
쿠키 저장하는 함수 (쿠키이름, 값, 기한)
//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
function setCookie(cookieName, valuem exdays){
}
오늘 날짜 뽑기
//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
function setCookie(cookieName, value, exdays){
//오늘 날짜 뽑기
let date = new Date();
alert(date);
}
60더한 날짜 출력하기
//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
function setCookie(cookieName, value, exdays){
//오늘 날짜 뽑기
let date = new Date();
alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
}
> 5+60 =560으로 나옴
정확한 값 계산
//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
function setCookie(cookieName, value, exdays){
//오늘 날짜 뽑기
let date = new Date();
//alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
alert(date.setDate(date.getDate()));
alert(date.setDate(date.getDate() + exdays));
}
쿠키는=value(사용자가 입력한 아이디)
//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
function setCookie(cookieName, value, exdays){
//오늘 날짜 뽑기
let date = new Date();
//alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
//alert(date.setDate(date.getDate()));
//alert(date.setDate(date.getDate() + exdays));
doucument.cookie = cookieName + "=" + value;
}
여기까지 했는데 로그인 카운터가 갑자기 되지 않음
//쿠키값 가져오기(가져올 쿠키 이름)
function getCookie(cookieName){
let x, y;
let val = document.cookie.split(';');
for(let i = 0; i < val.length; i++){
x = val[i].substr(0, val[i].indexOf('='));//저장한 쿠키이름
y = val[i].substr(val[i].indexOf('=') + 1);//쿠키 값
x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기
if(x == cookieName){
return y;
}
}
}
쿠키 값 가져오기
$(function(){
//cookie 가져오기 = getCookie
let userInputId = getCookie('userInputId');
}
$(function(){
//cookie 가져오기 = getCookie
let userInputId = getCookie('userInputId');
$('#id').val(userInputId);
}
if문 만들어주기
//쿠키값 가져오기(가져올 쿠키 이름)
function getCookie(cookieName){
let x, y;
let val = document.cookie.split(';');
for(let i = 0; i < val.length; i++){
x = val[i].substr(0, val[i].indexOf('='));//저장한 쿠키이름
y = val[i].substr(val[i].indexOf('=') + 1);//쿠키 값
if(x == cookieName){
return y;
}
}
}
아이디 저장을 클릭했는지 저장합니다.
사용자가 id 저장을 누르지 않음
아이디 저장을 클릭했는지 저장합니다. > setCookie('setCookieYN','Y', 60); 추가
//쿠키에 id저장하기
//if문으로 사용자가 아이디 저장 눌렀어?
if($('#saveID').is(':checked')){
//ID불러와서 저장하기
setCookie('setCookieYN', 'Y', 60); // 아이디 저장을 클릭했는지 저장합니다.
setCookie("userInputId", id, 60); //쿠키 저장하는 함수
} else {
//사용자가 id 저장을 누르지 않음. = 저장 안 함.
delCookie('userInputId');
}
$('#loginForm').submit();//form 실행
});
});
date.setDate(date.getDate() +exdays);
let value2 = escape(value) + "; expires=" + date.toGMTString(); 추가
//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
function setCookie(cookieName, value, exdays){
//오늘 날짜 뽑기
let date = new Date();
//alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
//alert(date.setDate(date.getDate()));
//alert(date.setDate(date.getDate() + exdays));
date.setDate(date.getDate() + exdays);
let value2 = escape(value) + "; expires=" + date.toGMTString();
//escape() 아스키문자에 해당하지 않는 문자들은 모두 유니코드 형식으로 변환
document.cookie = cookieName + "=" + value2;
}
else 지우기
//cookie 가져오기 = getCookie
let userInputId = getCookie("userInputId");
let setCookieYN = getCookie('setCookieYN');
if(setCookieYN == 'Y'){
$('#id').val(userInputId);
$('#saveID').prop("checked","true")
}
유저인풋아이디 앞뒤로 생기는 공백 제거>x = x.replace(/^\s+|\s+$/g,''); 추가
for(let i = 0; i< val.length; i++){
x = val[i].substr(0, val[i].indexOf('='));//저장한 쿠키이름
y = val[i].substr(val[i].indexOf('=')+1);//쿠키값
x = x.replace(/^\s+|\s+$/g,'');//유저인풋아이디 앞뒤로 생기는 공백 제거
if(x == cookieName){
return y;
}
아이디 저장을 클릭하면 저장.
사용자가 id 저장을 누르지 않음 = 저장 안 함.
//쿠키에 id저장하기
//if문으로 사용자가 아이디 저장 눌렀어?
if($('#saveID').is(':checked')){
//ID불러와서 저장하기
setCookie('setCookieYN', 'Y', 60); // 아이디 저장을 클릭했는지 저장합니다.
setCookie("userInputId", id, 60); //쿠키 저장하는 함수
} else {
//사용자가 id 저장을 누르지 않음. = 저장 안 함.
delCookie('userInputId');
delCookie('setCookieYN');
}
$('#loginForm').submit();//form 실행
});
});
삭제하기(삭제할 쿠키 이름) 스크립트
>아이디저장 체크 안하면 삭제된다.
//삭제하기(삭제할 쿠키 이름)
function delCookie(cookieName){
let date = new Date();
date.setDate(date.getDate()-1);
document.cookie = cookieName + "=; expires="+date.toGMTString();
document.cookie = cookieName + "=; max-age=0";
}
//삭제하기(삭제할 쿠키 이름)
function delCookie(cookieName){
//let date = new Date();
//date.setDate(date.getDate()-1);
//document.cookie = cookieName + "=; expires="+date.toGMTString();
document.cookie = cookieName + "=; max-age=0";
}
체크박스에 아이디 저장 해제하면 아래처럼 쿠키에 userInputId 없어진다.
아이피 잡아주기> 아이피를 검색하면 넘어가도록
화면에 아이피 보여주기
어드민매퍼>ip 있음
admin/board
admin-mapper
<select id="boardList" parameterType="searchDTO" resultType="boardDTO">
SELECT b.board_no, b.board_title, m.mname, m.mid,
if(date_format(current_timestamp(),'%Y-%m-%d') =
date_format(b.board_date,'%Y-%m-%d'),date_format(b.board_date,'%h:%i'),
date_format(b.board_date,'%m-%d')) AS board_date, b.board_ip, b.board_del
FROM board b JOIN member m ON b.mno=m.mno
<where>
<if test="searchTitle == 1">
b.board_title LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 2">
b.board_content LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 3">
m.mname LIKE CONCAT('%', #{search}, '%')
</if>
</where>
ORDER BY b.board_no DESC
LIMIT #{pageNo}, #{recordCountPerPage};
</select>
<thead>, <tbody> 안에 ip 추가 하고, 너비조정
<thead>
<tr class="row">
<th class="col-1 text-center">번호</th>
<th class="col-4 text-center">제목</th>
<th class="col-2 text-center">글쓴이</th>
<th class="col-1 text-center">날짜</th>
<th class="col-2 text-center">ip</th>
<th class="col-1 text-center">읽음</th>
<th class="col-1 text-center">보기</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list }" var="row">
<tr class="row<c:if test="${row.board_del eq 0}"> bg-dark</c:if>"">
<td class="col-1 text-center">${row.board_no }</td>
<td class="col-4">${row.board_title }</td>
<td class="col-2"><a href="./board?searchTitle=3&search=${row.mname }">${row.mname }</a></td>
<td class="col-1 text-center">${row.board_date }</td>
<td class="col-2 text-center">${row.board_ip }</td>
<td class="col-1 text-center">${row.board_count }</td>
<td class="col-1 text-center">
<c:choose>
<c:when test="${row.board_del eq 1 }">
<i class="fa fa-eye" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
</c:when>
<c:otherwise>
<i class="fa fa-eye-slash" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
</c:otherwise>
</c:choose>
</td>
</tr>
</c:forEach>
</tbody>
ip검색 넣어주기
<div class="input-group col-6">
<select name="searchTitle" id="searchTitle" class="form-control col-3">
<option value="1" <c:if test="${searchTitle eq 1 }">selected="selected"</c:if>>제목 검색</option>
<option value="2" <c:if test="${searchTitle eq 2 }">selected="selected"</c:if>>본문 검색</option>
<option value="3" <c:if test="${searchTitle eq 3 }">selected="selected"</c:if>>작성자 검색</option>
<option value="3" <c:if test="${searchTitle eq 3 }">selected="selected"</c:if>>ip 검색</option>
</select>
<tbody> 안에 바꾸기
<tbody>
<c:forEach items="${list }" var="row">
<tr class="row<c:if test="${row.board_del eq 0}"> bg-dark</c:if>"">
<td class="col-1 text-center">${row.board_no }</td>
<td class="col-4" onclick="detail(${row.board_no })">
${row.board_title }</td>
<td class="col-2"><a href="./board?searchTitle=3&search=${row.mname }">${row.mname }</a></td>
<td class="col-1 text-center">${row.board_date }</td>
<td class="col-2 text-center">
<a href="./board?searchTitle=4&search=${row.board_ip }">${row.board_ip }</a>
</td>
<td class="col-1 text-center">${row.board_count }</td>
<td class="col-1 text-center">
<c:choose>
<c:when test="${row.board_del eq 1 }">
<i class="fa fa-eye" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
</c:when>
<c:otherwise>
<i class="fa fa-eye-slash" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
</c:otherwise>
</c:choose>
admin-mapper
totalRecordCount> searchTitle == 4 추가
<select id="boardList" parameterType="searchDTO" resultType="boardDTO">
SELECT b.board_no, b.board_title, m.mname, m.mid,
if(date_format(current_timestamp(),'%Y-%m-%d') =
date_format(b.board_date,'%Y-%m-%d'),date_format(b.board_date,'%h:%i'),
date_format(b.board_date,'%m-%d')) AS board_date, b.board_ip, b.board_del
FROM board b JOIN member m ON b.mno=m.mno
<where>
<if test="searchTitle == 1">
b.board_title LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 2">
b.board_content LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 3">
m.mname LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 4">
b.board_ip = #{search}
</if>
</where>
ORDER BY b.board_no DESC
LIMIT #{pageNo}, #{recordCountPerPage};
</select>
totalRecordCount> searchTitle == 4 추가
<select id="totalRecordCount" parameterType="String" resultType="Integer">
SELECT COUNT(*)
FROM board b JOIN member m ON b.mno=m.mno
<where>
<if test="searchTitle == 1">
b.board_title LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 2">
b.board_content LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 3">
m.mname LIKE CONCAT('%', #{search}, '%')
</if>
<if test="searchTitle == 4">
b.board_ip = #{search}
</if>
</where>
</select>
페이징할때 또 안됨> jsp에서 서치타이틀 같이 보내주기
function linkPage(pageNo){
location.href = "./board?pageNo="+pageNo+"&perPage=${perPage}&searchTitle=${searchTitle}&search=${search}";
}
'2023.11.21-2024.05.31' 카테고리의 다른 글
20240307 전자정부(프로젝트 만들기, board, detail) (0) | 2024.03.07 |
---|---|
20240305 스프링(관리자 페이지-상세보기 창으로 열기) (0) | 2024.03.05 |
20240304 스프링(페이징, 검색, 게시글 수,searchTitle,postDel) (0) | 2024.03.04 |
20240304 스프링(관리자페이지-adminboard, 페이징, 검색, 게시글 수 ) (0) | 2024.03.04 |
20240229 스프링(아이디중복체크(idCheck), 페이징, 검색(search ) (3) | 2024.02.29 |