js.cookie.jsに触れる機会がありまして。
今回は「js.cookie.js」に触れる機会があり、せっかくなので書き留めておこうと思いました。
きっかけ
「ページアクセス時モーダルを出現。2回目以降はユーザーが出すか、出さないかを選択できるようにしたい。」
ということで、モーダル内にチェックボックスを設けて、アクティブにすると次からはモーダルが出ないようする。という部分で「js.cookie.js」にお世話になりました。
モーダルについて
モーダルの処理は「jquery.layerBoard.js」を使用させていただきました。
(KIYOTA氏へ:素晴らしいプラグインをありがとうございます。)
jquery.cookie.jsからjs.cookie.jsへ
jquery.layerBoard.jsでは「jquery.cookie.js」が使用されています。
その「jquery.cookie.js」ですが、GitHub上にて「js-cookie」のアナウンスされおり、今回は「js-cookie」を使用するところに至りました。
ちなみに「jquery.layerBoard.js」の一部も編集を行っております。
js.cookie.js:cookieへの保存
今回だと以下の方法でcookieにaccessを保存することできました。便利ですよねー。
var cookie = 'access';
Cookies.set('name', cookie);
js.cookie.js:cookieの取り出す
なかなか直感的な感じですね。
Cookies.get('name');
コード内の流れ
$('input[name="viewCtr"]').change(function() {
//チェックされたらcookieにaccessを保存
if ($(this).is(':checked')) {
var cookie = 'access';
Cookies.set('name', cookie);
} else {
//チェックが外されたらcookieからaccessを削除
Cookies.remove('name', cookie);
}
});
var keys = Cookies.get('name');
//格納されたCookieを使用してモーダルがしている部分にclassを追加
if(keys == 'access'){
$('#layer_board_area').addClass('changed');
}
備考
検証はサーバー環境で行う事をオススメします。
関連ファイル
js.cookie.js
jquery.layerBoard.js(js.cookie.js版)
jQuery
※jquery.layerBoard.jsのライセンスは開発者である「KIYOTA氏」の意向を尊重致します。
パッケージ ※js.cookie.jsとjQueryは含まれておりません

