JQuery

[basic] JQ - 쿠키 (Cookie) 사용법 - 생성/얻기/삭제

목차

  1. 쿠키 사용 위한 필수 조건
  2. 쿠키 생성(=설정=만들기)
  3. 쿠키 얻기(=가져오기=사용)
  4. 쿠키 삭제(=제거)

 

쿠키 사용 위한 필수 조건

※ <head> 태그 안에 jQuery 및 jQuery Cookie 플러그인 로드 추가.

 

<head>

    <!-- jQuery 로드 -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <!-- jQuery Cookie 플러그인 로드 -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

</head>

 

 

쿠키 생성(=설정=만들기)

※ $.cookie(name, value, option) 메서드 사용.

 

<script>

$(document).ready(function () {

    // 쿠키 설정

    $.cookie('site', '홈짱닷컴');

    $.cookie('host', 'Homzzang.com', { expires: 7 });

});

</script>



PS. 코드 설명

  • $.cookie(name, value, options); // (이름, 값, 옵션) 순
  • site 쿠키에 '홈짱닷컴' 값 설정. (만료기간 미지정돼서 세션 쿠키로 취급되어 브라우저가 닫히면 자동으로 삭제됨.)
  • host 쿠키에 'Homzzang.com' 값 설정. (7일간 유효.)

 

 

쿠키 얻기(=가져오기=사용)

※  $.cookie(name) 메서드 이용.

 

<script>

$(document).ready(function () {

    // 쿠키 가져오기

    var site = $.cookie('site');

    var host = $.cookie('host');


    // 가져온 쿠키를 출력

    console.log('사이트: ' + site); // 홈짱닷컴

    console.log('호스트: ' + host); // Homzzang.com

});

</script>

 

 

쿠키 삭제(=제거=지우기)

※ $.removeCookie() 메서드 사용.

 

<script>

$(document).ready(function () {

    // 쿠키 삭제

    $.removeCookie('site');

});

</script>

 

 

PS. (쿠키/세션/캐시) 차이점 보기

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Traversing JQ - each() 메서드 ★★★ - 각 일치요소에 대해 함수 실행. (= 제이쿼리 반복문 = each메서…
Traversing JQ - end() 메서드 - 현재 체인에서 가장 최근의 필터링 작업을 끝내고 일치 요소집합을 이전 상태로 …
Traversing JQ - eq() 메서드 ★★★ - 선택 요소 중 특정 색인 번호 갖는 요소 반환. (= eq메서드 = 이큐…
Traversing JQ - filter() 메서드 -일치범위축소 (= 필터메서드) ※ 자식요소소유개수선택자 (= 자식개수선택자…
Traversing JQ - find() 메서드 ★★★ - 선택 요소의 자손요소 반환・찾기 (= find메서드 = 파인드메서드)
Traversing JQ - first() 메서드 - 선택요소의 첫번째요소 반환 (= first메서드 = 퍼스트메서드)
Traversing JQ - has() 메서드 - 내부에 하나 이상의 요소가 있는 모든 요소 반환 (= has메서드 = 해즈 메…
Traversing JQ - is() 메서드 ★ - 일치 여부 체크. (= is메서드 = 이즈메서드)
Traversing JQ - last() 메서드 - 선택요소들의 마지막 요소 반환
Traversing JQ - map() 메서드 - 일치하는 요소집합의 각 요소를 함수를 통해 전달하여 반환값 포함하는 새 jQu…
Traversing JQ - next() 메서드 - 선택요소 다음 형제요소 반환. (= next메서드 = 넥스트메서드)
Traversing JQ - nextAll() 메서드 - 선택요소의 모든 다음 형제요소 반환. (= nextAll메서드 = 넥스…
Traversing JQ - nextUntil() 메서드 - 주어진 두 인수 사이의 모든 다음 형제요소 반환
Traversing JQ - not() 메서드 - 일치 안 하는 요소 선택 (= not메서드 = 낫메서드)
Traversing JQ - offsetParent() 메서드 - 최초로 position된 부모요소 반환 (= offsetPar…
15/20
목록
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱 PC버전 로그인