jquery.cookie.jsでクリックしたら要素を一定期間表示させないようにする方法

こんにちは、ゆうやです！

本記事では、jquery.cookie.jsでクリックしたらその要素を一定期間表示させないようにする方法をご紹介します。

例えば、使い方が少し分かりづらいUIのチュートリアルを吹き出しデザインで表示して「OK」ボタンをクリックで非表示にしたり。

はたまた右下のほうに会員登録を促すバナーを設置したりと用途は多岐にわたると思います。

そのようなブロックには「クリックしたら次回以降（一定期間の間）そのページにアクセスした際は表示しない」という処理をすることがあり、そこでjQueryのプラグイン jquery.cookie.jsを使用します。

今回はそんな超便利なjquery.cookie.jsの使い方と表題のサンプルをご紹介します。

それでは参りましょう！

完成イメージの共有
今回使用するHTMLとCSS
cookie ブラウザを閉じるまで/有効期限1年間
参考記事
まとめ

完成イメージの共有

先に完成イメージを確認したい方は以下よりご覧になってください(^o^)

デモページでサンプルをみる

↑↑「ボタンをクリックしたら非表示にして一度ブラウザを閉じて再びアクセスするまで表示されない」というサンプルになっております。

今回使用するHTMLとCSS

使用するHTMLはこちらです！シンプル！

index.html

<div class="Item">これクリックしたらもう会えなくなるよ</div>

CSSでちょっぴりスタイリングしてあげましょう！

index.css

.Item {
  margin-top: 80px;
  width: 280px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: none;/*初期表示は非表示*/
  color: #fff;
  background: #5bc8ac;
  font-size: 16px;
  box-shadow: 4px 4px 4px -2px #000;
  cursor: pointer;
}

こんな感じの立体的なボタンになります！

cookie ブラウザを閉じるまで/有効期限1年間

■STEP１

jquery.cookie.jsを読み込んでいない方は、<head></head>内において以下CDNで読み込みましょう〜

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

注意

jqueryを読みんだ後に必ず読み込んで下さいまし

■STEP２

cookieを設定するスクリプトを書いていきます！

ポイントは、

ボタンをクリックした時にその要素をhideメソッドで非表示にする
ボタンをクリックした時にcookieに任意のキーで任意の値をセット
cookieのBtnの値がisClickeddではない時に要素を表示させる

です！

↓↓以下、jqueryのスクリプトです！

index.js

// cookieの値がisClickedじゃなかったら表示
  if ($.cookie('Btn') != 'isClicked') {
    $('.Item').show();
  }
  $('.Item').on('click', function(){
    $(this).hide();
    // cookieにBtnという名前でisClickedをセット cookieの有効期限はブラウザを閉じるまで
    $.cookie('Btn', 'isClicked');
  });

■STEP３（有効期限を指定）

例えば「cookieの有効期限を1年間にしたい！」という場合があるかと思います。

そんな時は以下のように追記していただければ大丈夫です(^o^)

↓↓↓

index.js

// cookieの値がisClickedじゃなかったら表示
  if ($.cookie('Btn') != 'isClicked') {
    $('.Cookie-Item').show();
  }
  $('.Cookie-Item').on('click', function(){
    $(this).hide();
    var date = new Date();
    // cookieにBtnという名前でisClickedをセット 期限は1年間
    $.cookie('Btn', 'isClicked', { expires: 365 });
  });

一週間なら365の箇所を7に変更してくだいまし。

参考記事

実装したいことがドンピシャで書いてありとても助けられました。ありがとうございました！！

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

まとめ

以上、jquery.cookie.jsでクリックしたら要素を一定期間表示させないようにする方法をご紹介しました。

jquery.cookie.jsは今回紹介した用途以外にも「アプリ起動時のようにアクセス時にフラッシュ画面を表示させる」といったものなど広く活用されている技術です(^o^)

そういう機会がありましたらぜひ参考にしていただけると幸いです。

最後までご高覧いただきありがとうございました！