jquery.cookie.jsの使い方!画面遷移してもナビゲーションの状態を維持するソースコード

WEBサイトのアコーディオンやナビゲーションの開閉状態を維持しておきたい場合、Cookie(クッキー)を使って制御する方法があります。

Cookieとは、WEBサイトを閲覧したときに、訪問者が訪れたサイトや入力したデータ、利用環境などの情報が記録されたファイル(仕組み)です。今回は、jquery.cookie.jsを使ってナビゲーションの状態を維持するソースコードを紹介します。

jquery.cookie.jsの使い方

以下の3つが基本になります。オプションについては割愛。

cookieの保存

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

cookieの取得

$.cookie( "cookieの名前" )

cookieの削除

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

ナビゲーションの状態を維持するソースコード

今回の主題ではないため、開閉ナビゲーションのソースは省略しますが、閉じた状態がデフォルト、クリックでclass「show-navbar」が付与されて開くナビゲーションを想定しています。

$(function(){
  if($.cookie("open-navbar") == "open" ){
	$('#nav-bar').removeClass('show-navbar');
	}
  $("#header-toggle").click(function() {
    if($.cookie("open-navbar")){
      $.removeCookie("open-navbar" , { path: "/" });
    } else {
      $.cookie("open-navbar" , "open" , { expires: 7,  path: "/" });
    }
  return false;
  });
});

【2行目~】cookie「open-navbar」が保存されてる場合(ナビゲーションが閉じている状態)、#nav-barに入っているclass「show-navbar」を削除(閉じた状態を維持)します。

【5行目~】#header-toggleをクリックした時、cookie「open-navbar」が保存されてる場合、cookieを削除します(開いた状態を維持)。cookie「open-navbar」が保存されていない場合(ナビゲーションが開いている状態)、cookie「open-navbar」に「open」を保存します。

Related Posts
Comment