[JavaScript]目次の開閉状態をCookieで記憶させた

JavaScriptを使用して目次のチェックボックス状態をCookieに保存するようにしてみました。
ページ再読み込み後も状態を維持するためにイベントリスナーで設定しています。
ちらつき防止のためのCSSも設定しました。

1. JavaScriptコード

前回は、サイドバーに目次を追加しました。

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後（１つ目の見出しの前...

チェックボックスの状態をJavaScriptを使ってCookieに保存し、ページを再読み込みした後もその状態を維持するようにしてみました。

/** 2024-08-30 チェックボックスの状態を保存する関数 */
// チェックボックスの状態を保存する関数
function saveCheckboxState() {
    const checkbox = document.getElementById('toc-checkbox-3');
    document.cookie = `toc-checkbox-3=${checkbox.checked}; max-age=31536000; path=/`;
}

// チェックボックスの状態を読み込む関数
function loadCheckboxState() {
    const checkbox = document.getElementById('toc-checkbox-3');
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
        const [name, value] = cookie.trim().split('=');
        if (name === 'toc-checkbox-3') {
            checkbox.checked = value === 'true';
            break;
        }
    }
}

// 即時関数を使用してコードを実行
(function() {
    loadCheckboxState();
    const checkbox = document.getElementById('toc-checkbox-3');
    checkbox.addEventListener('change', saveCheckboxState);
    
    // チェックボックスを表示
    document.body.classList.add('js-loaded');
})();

このJavaScriptコードは以下のように動作します：

saveCheckboxState() 関数：
チェックボックスの状態を取得し、Cookieに保存します。
loadCheckboxState() 関数：
Cookieからチェックボックスの状態を読み込み、チェックボックスに適用します。
JavaScriptコードは即時関数内で実行
DOMの読み込みを待つ必要がなく、コードがより早く実行されます。
ページ読み込み時にチェックボックスの状態を読み込み、チェックボックスの変更イベントにリスナーを設定します。

目次に戻る

2. ちらつき防止のためのロード済みチェック（CSS）

ちらつきを防ぐためにCSSも設定します。

JavaScriptコードが実行されると、body 要素に js-loaded クラスが追加されます。
これにより、CSSルールが適用され、チェックボックスが表示されます。

/** 2024-08-30 チェックボックスの状態を保存する */
/* JavaScriptが読み込まれる前の暫定表示 */
#main-scroll .toc-checkbox:checked~.toc-content {
    opacity: .2;
    left:0px;
    visibility: hidden;
}
#main-scroll .toc-checkbox:checked~.toc-title::after {
    content: '\f101';
}
/* JavaScriptが読み込まれたら表示する */
.js-loaded #main-scroll .toc-checkbox:checked~.toc-title::after {
    content: '\f100';
}

.js-loaded #main-scroll .toc-checkbox:checked~.toc-content {
    left:16px;
    opacity: 1;
    visibility: visible;
}

CSSで、.toc-checkbox クラスを持つ要素（チェックボックス）を初期状態で非表示にします。

こちらもどうぞ。