web関連

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

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

トップページにアクセスしたらモーダルを表示させる記述を書きました。
しかし、トップページにアクセスする度にモーダルが開くの良くないと考えcookieを持たせて一定の期間はモーダルがでないようにしようとしたら手こずったので備忘録。

モーダルはjqueryのプラグイン「Modaal」を使いました。

使い方

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
CDN使う方がサーバーにファイルを上げて読み込むより早いらしい

cookieを保存する方法

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

$.cookie("KEY", "VALUE", { expires: 7 });
KEY(名前)
cookieの名前が入ります。
VALUE(値)
cookieの値が入ります。
expires(パラメーター)
以下のパラメーターを設定できます。

expires: 7有効期限(日数)、設定をしなかったらブラウザを閉じたらcookieが消える
path:”/”保存パス(ドメイン全体で利用する場合は’/’を設定)
domain:”sample.com”有効なドメイン
secure:trueHTTPS接続の時のみcookieを使えるようにするやつ(デフォルトはfalse)
「KEY」と「VALUE」の違いがいまいちわからなかったが「KEY」はそのcookieに名前を付ける変数・器みたいなもので、「VALUE」は変数に入れる値的な解釈で納得している

cookieを削除する方法

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

$.removeCookie("KEY");

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

$.removeCookie("KEY", { path: "/" });
正直「expires(有効期限)」しか使わない

実際に使用したコード

今回はトップページだけにモーダルを使いたかったので、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(ページ内リンク)を作ってます。
アクセスすれば、再度モーダルを表示できるようになる(無くて大丈夫)

cookieを使った事ほとんどなかったから大変だった。
モーダルは「modaal」を使ったけど、「start_open:true」という「ページが読み込まれたらモーダル開いてね」というオプションあって楽だった。僕的は普段「remodal」使ってたけどモーダル開くのにURLに「#ほにゃらら」ってついてしまうので今回は「modaal」を使用。オプションとかで「#ほにゃらら」つかないようにできたかもだけど見てないや。