jQuery에서 쿠키 설정 및 삭제
이 기사에서는 jQuery를 사용하여 쿠키를 설정하고 삭제하는 방법에 대한 두 가지 예를 설명합니다. 첫 번째 예에서는 GitHub에서 가져올 수 있는 jquery-cookie라는 플러그인을 사용합니다.
두 번째 예에서는 사용자 지정 함수를 사용하여 쿠키를 만들고 삭제합니다.
jQuery에서 jquery-cookie를 사용하여 쿠키 생성 및 삭제
jquery-cookie 플러그인을 사용하면 웹 브라우저에서 쿠키를 생성하고 삭제할 수 있습니다. 플러그인에는 이를 가능하게 하는 두 가지 기능이 있습니다. 그들은 $.cookie() 및 $.removeCookie()입니다.
$.cookie() 함수를 사용하면 쿠키 이름과 해당 매개변수를 설정할 수 있습니다. $.removeCookie() 함수는 쿠키를 삭제합니다.
GitHub 저장소에서 jquery-cookie를 얻을 수 있습니다. 그런 다음 작업 디렉토리에 저장하십시오. 거기에서 jQuery도 연결했는지 확인하십시오.
다음 코드에는 jquery-cookie를 사용하여 쿠키를 설정하고 삭제하는 방법에 대한 세부 정보가 포함되어 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-set-cookie</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<script type="text/javascript" src="js/jquery-cookie.js"></script>
<script>
// Define a cookie called DelftStack_Cookie
// and set its value to 4500.
$.cookie("DelfStack_Cookie", 4500);
let cookie_value = $.cookie("DelfStack_Cookie");
/* Remove the cookie
$.removeCookie("DelfStack_Cookie");*/
</script>
</body>
</html>
출력(브라우저 콘솔 관찰):
jQuery에서 사용자 정의 함수를 사용하여 쿠키 생성 및 삭제
시간을 계산하고 document.cookie() 메서드를 사용하는 사용자 지정 함수는 쿠키를 설정하고 삭제할 수 있습니다. 그런 다음 시간 계산을 사용하여 쿠키의 만료 날짜를 결정합니다.
이를 위해서는 Date 개체 메서드가 필요합니다. 이들은 setTime(), getTime() 및 toGMTString()입니다. 또한 encodeURIComponent를 사용하여 쿠키 이름의 문자를 이스케이프합니다.
다음 코드에서 쿠키를 설정하는 데 사용할 수 있는 사용자 지정 함수를 찾을 수 있습니다. 다만, 쿠키를 삭제할 수 있는 코드는 댓글로 남겨두었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-set-cookie</title>
</head>
<body>
<script>
function create_cookie(cookie_name, cookie_value, cookie_life_time) {
let cookie_expires;
if (cookie_life_time) {
let current_date = new Date();
let current_time = current_date.getTime();
current_date.setTime(current_time + (cookie_life_time * 24 * 60 * 60 * 1000));
cookie_expires = "; expires=" + current_date.toGMTString();
} else {
cookie_expires = "";
}
document.cookie = encodeURIComponent(cookie_name) + "=" + encodeURIComponent(cookie_value) + cookie_expires + "; path=/";
}
create_cookie('Habdul Hazeez', '14092022', 1);
/* Erase the stored cookie
function erase_cookie(cookie_name) {
create_cookie(cookie_name, "", -1);
}*/
</script>
</body>
</html>
출력(브라우저 콘솔 관찰):
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn