【jQuery】「jquery.cookie.js」でcookieを保存＆削除する方法！おすすめな使い方もご紹介！

みなさん、こんにちは。

クライアントワークで何回もお世話になっているcookieを扱いやすくする「jquery.cookie.js」をご紹介します。

cookieを使って初回のアクセス時のみモーダルウィンドウを表示させたい場合などがあるかと思います。
そんな時に便利なのが「jquery.cookie.js」です。

「jquery.cookie.js」の使い方

まずは必要なスクリプトを読み込ませます。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

1行目のjQuery本体は既に読み込み済みの場合は必要ありません。
「jquery.cookie.js」はこちらからhttps://github.com/carhartl/jquery-cookieからダウンロードすることが出来ます。

また、CDNを使いたい場合はこちらにあります。
https://cdnjs.com/libraries/jquery-cookie

cookieの保存

cookieを保存するには以下のように記述します。

$.cookie('name', 'value', { expires: 7 });

上記の場合はスクリプトが読み込まれたタイミングで「name」という名前に「value」という値が保存されます。
このcookieの有効期限は7日間です。

オプション

オプションを複数設定する場合は以下のようにします。

$.cookie('name', 'value', {
	expires: 365,
	path: '/'
});

cookieの取得

cookieを取得するには以下のように記述します。

$.cookie（'name'）;

nameの値が取得できます。

以下のように条件分岐の条件としてよく使います。

var name = $.cookie（'name'）;
if(name == 'value') {
	console.log(name);
}

cookieの削除

cookieを削除するには以下のように記述します。

$.removeCookie('name');

cookieを保存する時にpathを指定していた場合はcookieを削除する時にもpathを指定します。

$.removeCookie('name', { path: '/' });

おすすめな使い方

クライアントワークでよく喜ばれたのは削除機能を付けることです。

以下のように記述します。

var password = location.search;
if(password == '?cookie=reset') {
	$.removeCookie('name', { path: '/' });
}

以下のようにサイトURLにパラメータを付けるとクッキーが削除されます。
https://×××.co.jp?cookie=reset

有効期限を設定するとcookieを削除するのが面倒で確認作業が大変なので、簡単にcookieを削除する機能を付けてあげると便利になります。

参考サイト

https://www.tam-tam.co.jp/tipsnote/javascript/post3109.html