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

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

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

▼サイドメニューのイメージ：赤枠エリア（画像は『Admine LTE 3』より引用）
<img width="1644" alt="スクリーンショット 2020-04-24 14.50.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287877/5fba5693-93ca-99b6-da2b-0dd5aa8a8cf7.png">

#準備

[jquery.cookie.js](https://github.com/carhartl/jquery-cookie)というライブラリを使うと、簡単にクッキーへのデータ保存・取得が行えます。

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

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

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

#実装する

```js:
  //(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の値を設定する
```js:cookieの取得
var cookie = $.cookie('名前')
```
`$.cookie()`でクッキーを取得し、変数cookieに代入できます。

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

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

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

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

```js:実装コード
//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の付け外しと同時に、クッキーの値の変更を行います。

```js:cookieの保存
$.cookie('名前','値');
```
上記の方法で、クッキーに値を保存できます。

```js:cookieのオプション
$.cookie('名前','値',{
  expires: 7,
  path:'/', 
});
```
さらに、クッキーにはオプションを設定することができます。

| オプション名　　　　|メモ | 
|:------------------|:------------------|
| expires           　　 | - クッキーの保存期限。単位は日数。（7=7日間）。<br>- 省略時はブラウザ終了まで有効。 <br>- 秒・分・時で制御する方法もある。<br>- ブラウザによっては、最大保存期限が決まっているので無意味な時がある。| 
| path           　　 | - クッキーを使用するパス。サイト全体で使う場合は'/'を設定。| 

```js:実装コード
// .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」タブを選択