안녕하세요. 명월입니다.
이 글은 Jquery에서 $.cookie를 다루는 방법에 대한 글입니다.
웹 프로그래밍을 하면 쿠키와 세션의 개념이 있습니다. 이 두 개념은 간단하면서도 많은 분이 헤갈리는 개념입니다.
먼저 쿠키(cookie)란 웹서버와 웹 브라우저 간의 정보 공유(share)를 위한 개념입니다. 쿠키 설정은 브라우저와 웹 서버에서 둘 다 할 수 있고, 정보는 브라우저 측에서 보관을 합니다.
브라우저에서는 자바스크립트 등을 이용해서 쿠키를 등록하면 되고 서버 측에서는 response시에 Set-Cookie로 값을 등록하게 됩니다.
세션(Session)의 경우는 브라우저와 웹 서버 간의 정보 공유(share)를 위한 개념인 것은 같으나 정보의 보관 개념을 브라우져가 아닌 서버 측에서 저장하게 됩니다.
이유는 보안상의 여러가지 이유가 있습니다. 세션의 값은 각 브라우저 간의 구별을 위해 세션 키를 생성하고 있고 이 키는 쿠키로 보관되어 공유를 하게 됩니다.
정리하면 값은 서버 측에서 보관이 됩니다만, 그를 가져올 수 있는 키는 쿠키로 보관이 되는 것입니다.
이 세션과 쿠키를 다루는 것에 대해서는 서버 사이드에서는 각 언어별로 다릅니다만 클라이언트에서는 자바스크립트로 컨트롤이 가능하고 Jquery 라이브리리에서 좀 더 쉽게 접근이 가능하게 하였습니다.
//쿠키 쓰기
$.cookie('쿠키 키', '값', { expires: 7 /*유효 기간(일 단위 기준)*/, path: '/' /*도메인과 path가 일치해야 저장된다.*/});
//쿠키 읽기
$.cookie('쿠키 키');
// 쿠키 삭제
$.removeCookie('name', { path: '/' /*path가 있을 경우, 일치해야 삭제된다.*/});
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
$.removeCookie('TEST');
$.cookie('www', 'hello world');
console.log($.cookie('www'));
});
</script>
</head>
<body>
</body>
</html>
여기까지 Jquery에서 $.cookie를 다루는 방법에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Html] video와 audio 태그 (0) | 2020.03.05 |
|---|---|
| [Jquery] ajax 전역 이벤트를 사용하는 방법 (0) | 2019.11.27 |
| [Javascript] Html태그로 파일 다운로드(base64)를 하는 방법 (0) | 2019.11.23 |
| [Javascript] 서명 마크(sign)를 만드는 방법(canvas태크) (4) | 2019.11.14 |
| [CSS] 반응형 웹을 만들기 위한 브라우저 사이즈별 css 적용 방법 (0) | 2019.11.05 |
| [Javascript] 팝업 라이브러리(bootbox) (0) | 2019.11.04 |
| [Javascript] 접속 브라우져를 확인하는 방법 (0) | 2019.11.02 |
| [Javascript] Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법 (0) | 2019.11.01 |