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

やりたいこと

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

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

▼サイドメニューのイメージ：赤枠エリア（画像は『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」タブを選択