언어공부/JavaScript&jQuery
제이쿼리(jQuery) 기초 문법 - jquery-cookie 플러그인 활용
yeony
2021. 8. 16. 23:02
제이쿼리(jQuery) 기초 문법
jquery-cookie 플러그인 활용
jquery-cookie 플러그인을 사용하면 간편하게 쿠키(cookie)를 생성하고 쿠키 만료일을 설정할 수 있다. 쿠키란 '사이트를 방문한 사용자의 소량의 브라우저 정보를 저장할 수 있는 공간'을 말한다. 소량의 데이터를 저장할 수 있는 저장소를 쿠키 조각에 비유한 것이다. 쿠키는 하나의 도메인당 최대 20개를 생성할 수 있고 최대 4KB까지 저장할 수 있다. 쿠키를 사용하면 '오늘 하루 동안 이 창 열지 않기'나 '최근에 본 상품'기능을 구현할 수 있다.
jquery-cookie 플러그인 설치
cdnjs(https://cdnjs.com/)사이트에서 'jquery-cookie'를 검색한다.
해당 주소를 카피해서 브라우저 url창에 붙여넣고 이동하면 js파일 내용이 브라우저에 나타난다. 해당 파일을 저장해도 되고, 스크립트로 카피해서 그냥 붙여넣기해서 사용해도 된다. (여기서는 스크립트를 카피해 사용함.)
jquery-cookie 메소드 사용법
| 종류 | 예시 | 설명 |
| $.cookie("쿠키 이름","쿠키 값",{expires:만료일,path:"저장 경로"}); | $.cookie("cookie1","hi",{expires:2,path:"/"}); | 쿠키 이름: "cookie1", 쿠키 값:"hi", expires:값 2 (2일 후 자동 소멸) path 값:"/"(최상위 폴더에 저장 |
| $.cookie("쿠키이름"); | $.cookie("cookie1"); | "cookie1"이라는 이름으로 저장된 쿠키의 값을 반환한다. |
| $.remove("쿠키 이름"); | $.removeCokkie("cookie1"); | "cookie1"이라는 이름으로 저장된 쿠키를 제거한다. |
3일동안 이 창 열지 않기 팝업 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3일동안 이창 열지 않기</title>
<script src="../js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"
integrity="sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function(){
if($.cookie("popup") =="none"){
$("#notice").hide();
//쿠키("popup")의 값이 "none"이면 id값이 "notice"인 요소를 숨긴다.
}
var $expChk = $("#expiresChk");
$(".closeBtn").on("click",closePop);
function closePop(){
if($expChk.is(":checked")){
$.cookie("popup","none",{expires:3,path:"/"});
//".closeBtn"버튼을 클릭하면 체크박스의 체크 유무에 따라 쿠키를 생성해 3일간 저장
}
$("#notice").fadeOut("fast");
}
});
</script>
</head>
<body>
<div id="notice">
<img src="../Images/icon1.png" alt="공지사진">
<p class="close">
<input type="checkbox" name="expiresChk" id="expiresChk">
<label for="expiresChk">3일동안 이 창 열지 않기</label>
<button class="closeBtn">닫기</button>
</p>
</div>
</body>
</html>
