toggle で切り替えた class を sessionStorage で維持する方法

JavaScriptのclassList.toggleで切り替えたclassをWeb Storage の sessionStorageで維持

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

当サイトを PC で見ると、左側にメニューが並んでいます。

ただ、サイトタイトル横のメニューアイコンをクリックすると、サイドメニューが非表示になります。

メニューアイコンをクリックするとサイドメニューが非表示に

非表示になると、ページを移動しても、ページを再読み込みしても、サイドメニューは非表示のまま。

もう 1 度メニューアイコンをクリックするか、ブラウザを閉じない限り、サイドメニューは表示されません。

Web Storage の sessionStorage を使って実現しているので、その方法のご紹介です。

localStorage でも、やることは同じです。

やっていること

サイドメニューの非表示を維持するために、やっていることは下記のとおりです。

  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 です。

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' );
    }
})();

「 toggle few set of classes and save it via HTML local storage 」を参考にしました。

2 行目に <body> タグの id の body 、 4 行目にメニューアイコンの id の menu-icon を指定します。

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 行目は、もう 1 度メニューアイコンをクリックした時の設定です。

  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 が空の時は追加しません。

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

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