classList.toggle で切り替えた class を sessionStorage で維持

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

classList.toggle で切り替えた class を Web Storage の sessionStorage で維持する方法の紹介です。

使用ケース

執筆時点の Web 版の Youtube や Gmail は、左側にメニューがあります。このメニューは、ハンバーガーアイコンをクリックで縮小します。また、ページを移動しても縮小したメニューが維持されます。

サイトによっては、ハンバーガーアイコンをクリックでメニューを完全に隠すケースもあります。

このように「ユーザーのクリックで表示を変え、その表示をページを移動してもページを再読み込みしても維持する」ケースで、今回の方法を使えます。

ハンバーガーアイコンをクリックでメニューを隠すケースでは、このような方法で実装できます。

  1. ハンバーガーアイコンをクリックすると、<body> タグの class に no-sideを追加
  2. もう 1 度ハンバーガーアイコンをクリックすると、<body> タグの class から no-side を削除
  3. <body> タグの class に no-side がある時は、ページ移動後も <body> タグの class に no-side を追加
  4. no-side を使い、CSS でメニューのレイアウトを変更

1 番と 2 番には、classList.toggle() を使います。そして、3 番には sessionStorage を使います。

この方法で実装すると、再度ハンバーガーアイコンをクリックするか、ブラウザを閉じない限り、非表示になったメニューは表示されません。

今回は sessionStorage を使いますが、ブラウザを閉じてもデータを維持する localStorage でもやることは同じです。

JavaScript のコード

実際のコードは、このようなものです。

まず、HTML には、以下の id が付いているとします。

  • <body> タグには body
  • ハンバーガーアイコンには menu-icon

そして、JavaScript はこちら。

(function() {
  const target = document.getElementById('body');
  
  document.getElementById('menu-icon').addEventListener('click', function() {
    if (sessionStorage.toggled !== 'toggle') {
      target.classList.toggle('no-side', true);
      sessionStorage.toggled = 'toggle';
    } else {
      target.classList.toggle('no-side', false);
      sessionStorage.toggled = '';
    }
  });
  
  if (sessionStorage.toggled === 'toggle') {
    target.classList.toggle('no-side');
  }
})();

5 行目から 8 行目は、ハンバーガーアイコンをクリックした時の設定です。

if (sessionStorage.toggled !== 'toggle') {
  target.classList.toggle('no-side', true);
  sessionStorage.toggled = 'toggle';
}

ハンバーガーアイコンをクリックすると、<body> タグの class に no-side を追加します。それと同時に、key が toggled、value が toggle のデータアイテムを sessionStorage に保存します。

8 行目から 11 行目は、再度ハンバーガーアイコンをクリックした時の設定です。

else {
  target.classList.toggle('no-side', false);
  sessionStorage.toggled = '';
}

<body> タグの class から no-side を削除します。それと同時に、key が toggled、value が空のデータアイテムを sessionStorage に保存します。

14 行目から 16 行目は、sessionStorage を使った条件分岐の処理です。

if (sessionStorage.toggled === 'toggle') {
  target.classList.toggle('no-side');
}

sessionStorage に保存したデータアイテムが、key が toggled、かつ value が toggle の時は、<body> の class に no-side を追加します。value が空の時は追加しません。つまり、ハンバーガーアイコンをクリックし <body> の class に no-side が追加された場合は、ブラウザを閉じるまで <body> の class に no-side を追加し続けます。

あとは class の no-side を使い、CSS を指定します。

これでページを移動しても、再読み込みをしても、サイトの状態を維持できます。

ブラウザを閉じても状態を維持する場合は、4 ヶ所の sessionStoragelocalStorage に変更します。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。