スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jquery.cookie.jsの使い方と簡単なサンプルを紹介します

今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。

jquery-cookie2.png

まず、jQueryとjquery.cookieを読み込みます。ともにCDNになっているのでこちらでいいと思います。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

jquery.cookieを自分でダウンロードされる方はこちらから。

これで準備は完了ですので、実際に使っていきます。

jquery.cookie.jsの使い方

では、保存、取得、削除の順に説明します。

cookieを保存

まずは、cookieを保存する方法です。

$.cookie( "cookieの名前" , "値" );

これが基本形になります。さらにオプションとして保存期間等を指定することができます。

$.cookie( "sample" , "テスト" , { expires: 7 , path: "/", domain: "sample.com" , secure: true }

この場合、このようになります。cookie名「sample」に「テスト」という値を保存することになります。で、オプションの部分はこういう感じになります。

expires: 7
保存する期間になります。この場合7日間になります。

path: "/"
保存するパス名を指定します。この場合はサイト全体で利用することができます。

domain: "sample.com"
有効となるドメインを指定します。

secure: true
セキュアな通信のときのみ送信します。

オプションですので、指定は任意です。実際は最初の2つだけで十分かなと思います。

cookieの取得

次に保存したcookieを取得する方法です。

$.cookie( "cookieの名前" )

これで、保存した値が呼び出されます。

cookieの削除

最後に保存したcookieを削除する方法です。

$.removeCookie( "cookieの名前" );

これで保存したcookieが削除されます。

jquery.cookie.jsの使用例

これだけ聞いても実際にどうやって使うかわからないと思うので、簡単な使い方を紹介します。

「クリックで開閉するパネルがあって、ページの更新やページを移動してもパネルの状態が維持される」というのをしてみます。

でき上がりはこちらのリンクからご覧ください。

ということで簡単に説明します。まずはHTMLですが div と a だけのシンプルな構造です。

<div id="panel">開いた状態でページ更新しても開いたままです。</div>
<a href="#" id="panel-btn">panel</a>

CSSは特に問題ないと思いますので省略します。パネル本体は最初 display: none で非表示にしているので気をつけてください。

では、メインのjQueryの部分です。まずは全部載せます。

$(function(){
  if($.cookie("open-panel")){
    $("#panel").show();
  }
  $("#panel-btn").click(function() {
    if($.cookie("open-panel")){
      $("#panel").slideUp();
      $.removeCookie("open-panel" , { path: "/" });
    } else {
      $("#panel").slideDown();
      $.cookie("open-panel" , "open" , { expires: 7,  path: "/" });
    }
  return false;
  });
});

ポイントごとで解説します。

  if($.cookie("open-panel")){
    $("#panel").show();
  }

これはページを開いた際に実行されることになります。

パネルを開いた状態で画面を閉じた場合、後で解説するようにcookie「open-panel」が保存されていますので、ここでパネルを開くようにします。

今回は、あるかないかを判断するだけですが、cookieの値も考慮する場合は以下のようにします。

  if($.cookie("open-panel") == "open" ){
    $("#panel").show();
  }

「else if」を組み合わせると、cookieの値によって分岐させることもできます。

続いてこの部分。

  $("#panel-btn").click(function() {
    if($.cookie("open-panel")){
      $("#panel").slideUp();
      $.removeCookie("open-panel" , { path: "/" });
    } else {
      $("#panel").slideDown();
      $.cookie("open-panel" , "open" , { expires: 7,  path: "/" });
    }
  return false;
  });

こちらはクリックした場合の動きに関する部分です。

if内については、cookie「open-panel」がある場合です。cookie「open-panel」があるということは、パネルが開いている状態です。したがって、クリックした際の動きは、【パネルを閉じる】【サイト全体のcookieを削除する】ということになります。

else内は、cookie「open-panel」がない場合になります。最初はcookieがない状態なので、この部分の動作になります。最初はパネルが閉じている状態ですので、クリックした際の動きは、【パネルを開く】【cookie「open-panel」に値「open」を7日間サイト全体で保存する】ということになります。

cookieの名前と値は何でもいいです。値が数値の場合は、ダブルコーテーションはなくても大丈夫です。

さいごに

ということで、jQuery cookieについて、個人的にあまり使うこともないので、忘れないうちに書いてみました。

今回は、パネル開閉の際に使ってみましたが、他にもレイアウト、フォントサイズやカラー、背景色の変更なんかにも使えるかもしれないです。

とても使いやすいのでぜひ使ってみてください。何かの参考になればうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。