jQuery で Cookie を設定および削除する
この記事では、jQuery を使用して Cookie を設定および削除する方法の 2つの例を説明します。 最初の例では、GitHub から入手できる jquery-cookie というプラグインを使用します。
2 番目の例では、カスタム関数を使用して Cookie を作成および削除します。
jQuery で jquery-cookie を使用して Cookie を作成および削除する
jquery-cookie プラグインを使用すると、Web ブラウザーで Cookie を作成および削除できます。 プラグインには、これを可能にする 2つの機能があります。 $.cookie() と $.removeCookie() です。
$.cookie() 関数を使用すると、Cookie 名とそのパラメーターを設定できます。 $.removeCookie() 関数は Cookie を削除します。
GitHub リポジトリ から jquery-cookie を取得できます。 その後、作業ディレクトリに保存します。 そこから、jQuery もリンクしていることを確認します。
次のコードには、jquery-cookie を使用して 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 でカスタム関数を使用して Cookie を作成および削除する
時間を計算し、document.cookie() メソッドを使用するカスタム関数は、Cookie を設定および削除できます。 その後、時間計算を使用して Cookie の有効期限を決定します。
このためには、Date オブジェクト メソッドが必要です。 これらは、setTime()、getTime()、および toGMTString() です。 さらに、encodeURIComponent を使用して Cookie 名の文字をエスケープします。
次のコードには、Cookie を設定するために使用できるカスタム関数があります。 ただし、Cookie を削除できるコードはコメントとして残しました。
<!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