ProgrammingjQuery

[jQuery] jQuery를 사용해 쿠키관리하기 (읽기, 생성, 삭제, 생명주기)

jquery 쿠키, jquery 쿠키 읽기, jquery로 쿠키 만들기, 세션 의미, 쿠키, 쿠키 만들기, 쿠키 삭재, 쿠키 삭제, 쿠키 생명주기, 쿠키 생성하기, 쿠키 의미, 쿠키 읽기, 쿠키 읽어오기

만약 쿠키에 대해 잘 모르거나 헷갈리신다면 [WEB] 쿠키와 세션을 간단하게 알아보자를 참고해주세요!
쿠키와 세션을 쉽게 이해할 수 있습니다.

쿠키 이미지

간단하게 설명하자면!

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다.

사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있습니다.

쿠키 생성 삭제하기

  1. [jQuery] 다운로드 및 설치 방법 를 통해 jquery를 다운 받습니다.

  1. https://plugins.jquery.com/cookie/ jQuery Cookie 플러그인을 다운 받습니다.
  2. 다운로드 받은 js 파일을 페이지에 포함 시킵니다. jquery 플러그인 이므로 jquery 도 있어야 합니다.
1
2
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./jquery.cookie.js"></script>

  1. 쿠키 만들기
1
2
3
4
5
6
7
8
// 세션 쿠키 생성 - 브라우저를 닫으면 없으집니다.
$.cookie('name', 'value');

// 7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires: 7 });

// 전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires: 7, path: '/' });

  1. 쿠키 읽기
1
2
3
4
5
6
7
8
// 키로 사용한 이름으로 값을 읽습니다.
// 키로 저장된 값이 없으면 undefined 가 반환됩니다.
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

// 모든 쿠키 읽기
// 모든 쿠키를 { "name": "value" } 형태의 객체로 반환합니다.
$.cookie(); // => { "name": "value" }

  1. 쿠키 삭제하기
1
2
3
4
5
6
7
8
9
10
11
12
13
// 성공적으로 삭제되면 true 를 반환하고, 삭제 못했을때는 false를 반환합니다.
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

// 쿠키 삭제시 생성할때 와 같은 path와 domain 을 사용해야 합니다.
// 아래와 같이 생성했다면,
$.cookie('name', 'value', { path: '/' });

// 이렇게 삭제할 수 없습니다.
$.removeCookie('name'); // => false

// 이렇게 삭제해야 합니다.
$.removeCookie('name', { path: '/' }); // => true

Reference

Share