トップ / 【jQuery】「jquery.cookie.js」でcookieを保存&削除する方法!おすすめな使い方もご紹介!

2018.12.08

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

みなさん、こんにちは。

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

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

Contents

「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日間です。

オプション

expires有効期限(日数)
※省略した場合はセッションcookieになる(ブラウザを閉じると消える)
pathクッキーが有効なパス
※ドメイン全体で使用できるようにしたい場合は「path: ‘/’」にする
domainCookieが有効なドメインを定義します。
secureデフォルトはfalse
trueの場合「https」にしなければクッキーが送信されない。

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

$.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

この記事が気に入ったらいいね!で
最新記事をお届けします

記事が気に入ったらシェアしよう