제이쿼리(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>
'언어공부 > JavaScript&jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 기초 문법 - 탭 메뉴 만들기 (0) | 2021.08.18 |
|---|---|
| 제이쿼리(jQuery) 기초 문법 - 플러그인 직접 제작, 자주 묻는 질문 플러그인 제작 (0) | 2021.08.17 |
| 제이쿼리(jQuery) 기초 문법 - 제이쿼리 bxSlider 플러그인 활용 (0) | 2021.08.15 |
| 제이쿼리(jQuery) 기초 문법 - Ajax($.get())로 XML 데이터 바인딩 (0) | 2021.08.13 |
| 제이쿼리(jQuery) 기초 문법 - Ajax($.getJSON())로 JSON 데이터 바인딩 (0) | 2021.08.12 |
