【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」を保存します。