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はユーザー側のブラウザに情報を保存するため、次の点に注意しましょう。
- Cookieの有効期限:`expires`オプションで設定した日数が過ぎると、Cookieは自動的に削除されます。
- Cookieの保存容量:ブラウザごとにCookieの保存容量には制限があるため、大量のデータを保存するのには向きません。
- セキュリティ:Cookieに保存する情報は暗号化などの対策を取らない限り、ユーザーに閲覧される可能性があります。機密情報の保存には使用しないようにしましょう。
まとめ
jquery.cookie.jsを使えば、簡単にナビゲーションの開閉状態をCookieに保存し、次回訪問時にも状態を維持することができます。特にユーザーエクスペリエンスを向上させるために、ユーザーが設定した状態を保持する機能は、サイトの利便性を高める効果が期待できます。
ナビゲーション以外にも、アコーディオンメニューやフォーム入力状態の保持など、様々な場面で役立つので、ぜひ応用してみてください。