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は含まれておりません