js.cookie.jsに触れる機会がありまして。

top2015_1106.jpg今回は「js.cookie.js」に触れる機会があり、せっかくなので書き留めておこうと思いました。

きっかけ
「ページアクセス時モーダルを出現。2回目以降はユーザーが出すか、出さないかを選択できるようにしたい。」
ということで、モーダル内にチェックボックスを設けて、アクティブにすると次からはモーダルが出ないようする。という部分で「js.cookie.js」にお世話になりました。

demo

モーダルについて
モーダルの処理は「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は含まれておりません