jQueryでナビゲーションの状態をCookieで保持する方法を徹底解説

WEBサイトのナビゲーションやアコーディオンメニューの開閉状態を維持したい場合、Cookieを使って制御する方法があります。Cookieは、訪問者がWEBサイトを利用する際の情報を一時的に保存する仕組みです。

コードが書かれたモニター

Cookieは、ユーザーがページをリロードしても以前の操作状況を記憶するため、ナビゲーションの開閉状態を保存するのに最適です。

今回は、jquery.cookie.jsを使って、ナビゲーションの状態を維持するコードを紹介します。

jquery.cookie.jsの使い方

jquery.cookie.jsは、JavaScriptで手軽にCookieの読み書きを行えるプラグインです。

Cookieを使用してユーザーの設定や選択した状態を保持したいときに役立ちます。使い方はとてもシンプルで、以下の3つの操作が基本になります。

1. Cookieの保存

Cookieを保存する場合、以下のコードを使用します。

$.cookie( "cookie名", "値", { expires: 日数, path: '/' }); 

cookie名には保存するデータの名前、値には保存する情報を指定します。expiresオプションでCookieの有効期限を日数で設定し、pathオプションで適用されるパスを指定します。

2. Cookieの取得

保存したCookieを取得するには、次のコードを使用します。

$.cookie( "cookie名" ); 

これで、指定したcookie名の値を取得できます。

3. Cookieの削除

Cookieを削除するには、以下のコードを使います。

$.removeCookie( "cookie名", { path: '/' }); 

Cookieを削除する際は、pathオプションも指定して正しく削除します。

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

では、実際にナビゲーションの開閉状態をCookieで保存するコードを紹介します。今回の例では、ナビゲーションの閉じた状態をデフォルトとし、ユーザーがナビゲーションをクリックして開いたり閉じたりしたとき、その状態を保存します。

実装例

$(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;
  });
});

Cookieのチェックとナビゲーションの状態設定
2行目からは、ページを読み込んだ時点でCookie「open-navbar」が存在するかどうかを確認します。もしCookieが保存されていれば、#nav-barのshow-navbarクラスを削除し、ナビゲーションが閉じた状態を維持します。

クリックイベントによる状態変更
5行目からは、ユーザーが#header-toggleをクリックしたときに実行される処理です。もしCookieが存在する場合、削除します(つまりナビゲーションを開いた状態を維持)。逆に、Cookieが存在しない場合は、新しくCookieを保存し、ナビゲーションを閉じた状態にします。

このコードによって、ユーザーがナビゲーションを開いたり閉じたりする操作を保存し、再度ページを訪れたときにも前回の状態が維持されるようになります。

注意点

Cookieはユーザー側のブラウザに情報を保存するため、次の点に注意しましょう。

  1. Cookieの有効期限:`expires`オプションで設定した日数が過ぎると、Cookieは自動的に削除されます。
  2. Cookieの保存容量:ブラウザごとにCookieの保存容量には制限があるため、大量のデータを保存するのには向きません。
  3. セキュリティ:Cookieに保存する情報は暗号化などの対策を取らない限り、ユーザーに閲覧される可能性があります。機密情報の保存には使用しないようにしましょう。

まとめ

jquery.cookie.jsを使えば、簡単にナビゲーションの開閉状態をCookieに保存し、次回訪問時にも状態を維持することができます。特にユーザーエクスペリエンスを向上させるために、ユーザーが設定した状態を保持する機能は、サイトの利便性を高める効果が期待できます。

ナビゲーション以外にも、アコーディオンメニューやフォーム入力状態の保持など、様々な場面で役立つので、ぜひ応用してみてください。

コメントはこちらから

コメントは管理人の承認後、反映されます。