【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: '/'
});
}
});
解説
- サイドメニューが開いている = 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の値を設定する
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('名前','値',{
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」タブを選択
Author And Source
この問題について(【jQuery】サイドメニューの出し入れをcookieで保持する), 我々は、より多くの情報をここで見つけました https://qiita.com/ymeeto/items/5d5b983fe30add73607b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .