「jquery.cookie.js」の使い方で悪戦苦闘したので備忘録

使い方

「jquery.cookie.js」のCDNを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

cookieを保存する方法

「jquery.cookie.js」の基本的な書き方は以下のように記述します。

$.cookie("KEY", "VALUE", { expires: 7 });

KEY（名前）

cookieの名前が入ります。

VALUE（値）

cookieの値が入ります。

expires（パラメーター）

以下のパラメーターを設定できます。

expires: 7	有効期限（日数）、設定をしなかったらブラウザを閉じたらcookieが消える
path:”/”	保存パス（ドメイン全体で利用する場合は’/’を設定）
domain:”sample.com”	有効なドメイン
secure:true	HTTPS接続の時のみcookieを使えるようにするやつ（デフォルトはfalse）

cookieを削除する方法

以下の記述でcookieを削除できる。
「KEY」の部分はcookieに指定した名前を入れてください。

$.removeCookie("KEY");

↓パスを指定して、cookie消せるみたいだけどよくわからなかった

$.removeCookie("KEY", { path: "/" });

実際に使用したコード

今回はトップページだけにモーダルを使いたかったので、footer.phpに「is_front_page()」使って記述したときのコード。

<script>
jQuery(function($){
	//　確認用　ここから
	var url = location.href;//　現在のページのURL取得
	if (url == 'https://sample.com/#hoge' ) {
		$.removeCookie("samplename");
	}
	//　確認用　ここまで

	var CookieName = $.cookie("samplename");// cookieを保存
	if (CookieName == "samplevalue") {
		
		// cookieがある時の処理
		
	return false;

	} else{

		// cookieが無い時の処理
		
		$.cookie("samplename" , "samplevalue");
	}
})
</script>

「確認用　ここから　～　確認用　ここまで」の部分は、cookieを持たせちゃうとトップページのモーダルを確認できなくなっちゃうので、cookieを削除する用のURL（ページ内リンク）を作ってます。
アクセスすれば、再度モーダルを表示できるようになる（無くて大丈夫）