【jQuery】サイドメニューの出し入れをcookieで保持する


やりたいこと

ハンバーガーメニューのクリックにより出し入れされる「サイドメニュー」。
その表示・非表示の状態をサイト内で保持する。

以下のような挙動が可能。
- サイドメニューを非表示にする → ページ遷移 → サイドメニュー非表示になっている
- サイドメニューを非表示にする → ブラウザごと閉じる → 2日後にサイトを開く → サイドメニュー非表示になっている

▼サイドメニューのイメージ:赤枠エリア(画像は『Admine LTE 3』より引用)

準備

jquery.cookie.jsというライブラリを使うと、簡単にクッキーへのデータ保存・取得が行えます。

URLを開いてダウンロードし、jquery.cookie.jsを読み込むようにします。
(※ jQueryの読み込みも忘れずに!)

参考サイト:https://www.sejuku.net/blog/54153

前提

  • デフォルトはサイドメニューが開いている。
  • .is-sidemenu-open が .l-container に付与されるとサイドメニューが開き、削除されるとサイドメニューが閉じる。
  • cookieの値のルールは以下の通り
    • サイドメニューが開いている = open
    • サイドメニューが閉じている = close

実装する

  //(1)cookieが空の場合は値を'open'とする
  var cookie = $.cookie("sidemenu") || 'open';

  //(2)cookie情報から、サイドバー開閉クラス'is-sidemenu-open'を付与するか判断
  $(document).ready(function(){
    if(cookie === 'open'){
      $('.l-container').addClass('is-sidemenu-open');
    } else {
      $('.l-container').removeClass('is-sidemenu-open');
    }
  });

  //ハンバーガーメニューボタンをクリックした時
  $(document).on('click', '#btn-hamburger ', function () {
  //.is-sidemenu-openの付け外し
    $('.l-container').toggleClass('is-sidemenu-open');

    //(3).is-sidemenu-openの有無でcookieの値を変更
    if($('.l-container').hasClass('is-sidemenu-open')){
      $.cookie("sidemenu", "open",  {
        expires: 7,
        path: '/'
      });
    } else {
      $.cookie("sidemenu", "close",  {
        expires: 7,
        path: '/'
      });
    }
  });

解説

上記のコードを解説します。注意点などもまとめました。

(1)デフォルトのcookieの値を設定する

cookieの取得
var cookie = $.cookie('名前')

$.cookie()でクッキーを取得し、変数cookieに代入できます。

実装コード
var cookie = $.cookie("sidemenu") || 'open';

今回の場合、デフォルトでサイドバーを開いておきたいので、cookieの値に'open'を入れておきます。
これは、以下のコードを簡潔に略したコードになります。

var cookie = $.cookie('cookie');
if(cookie == '' || cookie == null) {
   var cookie = 'open';
}

(2)cookie情報から、.is-sidemenu-openを付与するか判断

クッキーの情報から、サイドメニューを開くためのクラス(.is-sidemenu-open)を付与するか削除するかを決定します。

実装コード
//cookieの値が'open'の場合
if(cookie === 'open'){ 
   $('.l-container').addClass('is-sidemenu-open');
 //それ以外(cookieの値が'close')の場合
 } else { 
   $('.l-container').removeClass('is-sidemenu-open');
 }

(3).is-sidemenu-openの有無でcookieの値を変更

ハンバーガーメニューのクリック時、.is-sidemenu-openの付け外しと同時に、クッキーの値の変更を行います。

cookieの保存
$.cookie('名前','');

上記の方法で、クッキーに値を保存できます。

cookieのオプション
$.cookie('名前','',{
  expires: 7,
  path:'/', 
});

さらに、クッキーにはオプションを設定することができます。

オプション名     メモ
expires    - クッキーの保存期限。単位は日数。(7=7日間)。
- 省略時はブラウザ終了まで有効。
- 秒・分・時で制御する方法もある。
- ブラウザによっては、最大保存期限が決まっているので無意味な時がある。
path    - クッキーを使用するパス。サイト全体で使う場合は'/'を設定。
実装コード
// .is-sidemenu-openがある場合は、"open"を保持する。
if($('.l-container').hasClass('is-sidemenu-open')){
      $.cookie("sidemenu", "open",  {
        expires: 7,
        path: '/'
      });
// .is-sidemenu-openがない場合は、"close"を保持する。
    } else {
      $.cookie("sidemenu", "close",  {
        expires: 7,
        path: '/'
      });
    }

注意したいのは、.is-sidemenu-openがない場合に、「cookieを削除」としないことです。
ON/OFFのような挙動をcookieを使って判別するのに、cookieの削除は不向きのようです。実際にやってみましたが、cookie削除がうまくできませんでした。
クッキーの値を切り替えることでうまくいきました。

また、サイドメニューの出し入れにアニメーションをつけている場合は、一工夫施さないと、ページ遷移のたびにサイドメニューがウニョウニョ動くので注意です。

おまけ:各ブラウザでのcookie確認方法

クッキーの名前(name)、値(Value)、保存期間を確認する方法をまとめました。

  • クッキーの更新は、ページリロードしないと反映されない。(consoleと違うので注意)
  • クッキーの値をリセットしたいときは、deleteキーで削除。

Chrome

検証モード > Application > Strage > Cookies

Safari

要素の詳細 > ストレージ > Cookie

Edge

開発者ツール > アプリケーション > ストレージ > Cookie

Firefox

要素を調査 > ストレージ > Coookie

IE

開発者ツール > ネットワーク >
緑の再生ボタン (ネットワーク トラフィックのキャプチャを有効にする)をクリック >
有効の状態でページ遷移やリロードする >
緑の再生ボタンの下にある「詳細」タブを選択 >
その下の「Cookie」タブを選択