jQuery.cookie.jsでクリックしたら次回から表示させないようにする

jQuery.cookie.jsを使えばcookie情報の取得、操作が簡単に行えます。
今回は既読にした要素を次回以降表示させないようにする方法をご紹介します。
お知らせをポップアップで表示した時などに使えるかも。

デモページ

jQuery.cookie.js配布元

MITライセンス

デモページでは、「次回以降は表示させない」ボタンをクリックすると、それ以降はそのボックスが表示されなくなります。
「このサイトのcookieを消す」をクリックしてリロードすると再びボックスが現れます。

jQuery

ダウンロードしたファイルには色々入っていますが、今回使うのは src/jquery.cookie.js のみです。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function () {
 //cookieの値がonじゃなかったら表示させる
 if ($.cookie('bnrRead') != 'on') {
  $('#main').append('<div id="bnr"><p>次回以降は表示させないように出来る要素</p><button id="btn">次回以降は表示させない</button></div>');
 }
 //隠すボタンをクリックしたらバナーを隠す
 $('#btn').click(function() {
  $('#bnr').hide();
  $.cookie('bnrRead', 'on', { //cookieにbnrReadという名前でonという値をセット
    expires: 7, //cookieの有効日数
    path:'/' //有効にするパス
   });
  });
 //cookieを削除する
 $('#del').click(function(){
  $.removeCookie('bnrRead' , { //bnrReadを削除
   path:'/' //有効にするパス
  });
 });
});
</script>

ブラウザのcookie情報を見てみると、こんな感じで格納されているのがわかります。(chromeの場合)